playwright: アラート関連

alert.test.ts

export{}
import playwright, { ChromiumBrowser, FirefoxBrowser, BrowserType, Page } from 'playwright'
import { Browsers, BROWSERLIST } from '../define'

let browser: playwright.Browser
let context: playwright.BrowserContext
let page: playwright.Page

const setNewPage = async(browserName: Browsers) => {
  browser = await playwright[browserName].launch()
  context = await browser.newContext()
  page = await context.newPage()
}

const alertMessageMatchedCorrectMsg = async(correctMsg: string, selector: string) => {
  await page.goto('http://localhost:3000/dialog_form')

  let dialogMessage = ""

  page.on('dialog', dialog => {
    const message = dialog.message()
    dialog.dismiss()
    dialogMessage = message
  })
  

  await page.click(selector)
  await browser.close()

  if (dialogMessage === correctMsg) {
    return 'OK'
  }
  return dialogMessage
}

const isPostedCorrectlyAfterPushConfirm = async(selector: string) => {
  await page.goto('http://localhost:3000/dialog_form')

  page.on('dialog', dialog => {
    dialog.accept()
  })

  await page.click(selector)

  await page.waitForLoadState()
  const nowPage = page.url()
  await browser.close()

  if (nowPage === 'http://localhost:3000/result') {
    return 'OK'
  }
  return nowPage
}

const isApperTextWhenInputStrInPrompt = async(selector: string) => {
  await page.goto('http://localhost:3000/dialog_form')

  const inputText = 'TEST'

  page.on('dialog', async dialog => {
    await dialog.accept(inputText)
  });

  await page.click(selector)

  const resultElement = await page.$('#prompt_result')

  const resultText = await page.evaluate(([ele]: any) => {
    return ele.innerText
  }, [resultElement])

  await browser.close()

  if (resultText === inputText) {
    return 'OK'
  }
  return resultText
}

for (const browser of BROWSERLIST) {
  describe('alertメソッドテスト', () => {
    test("alert実行時、正しいメッセージが表示されるか: " 　+ browser, async () => {
      await setNewPage(browser)
      let result = await alertMessageMatchedCorrectMsg('テストです', '.alert_button')
      expect(result).toBe('OK');
    });
  });

  describe('confirmメソッドテスト', () => {
    test('confirm実行時、正しいメッセージが表示されるか: '　+ browser, async () => {
      await setNewPage(browser)
      let result = await alertMessageMatchedCorrectMsg('※送信します', 'input[type="submit"]')
      expect(result).toBe('OK')
    })

    test('confirmをOK後にPOSTされるか: '　+ browser, async () => {
      await setNewPage(browser)
      let result = await isPostedCorrectlyAfterPushConfirm('input[type="submit"]')
      expect(result).toBe('OK')
    })
  })

  describe('promptメソッドテスト', () => {
    test('prompt実行時、正しいメッセージが表示されるか: ' + browser, async () => {
      await setNewPage(browser)
      let result = await alertMessageMatchedCorrectMsg('名前を入力してください', '.prompt_button')
      expect(result).toBe('OK')
    })

    test('promptで入力した値が画面に表示されるか: ' + browser, async () => {
      await setNewPage(browser)
      let result = await isApperTextWhenInputStrInPrompt('.prompt_button')
      expect(result).toBe('OK')
    })
  })
}