✨

Playwrightで多言語サイトのE2Eテストを自動化してみた

2022/07/13に公開

Next.js

以前、作成した、Next.js+Strapiで作成した多言語サイトのテンプレートのe2eテスト自動化をPlaywrightで行いました。

Playwrightを使用した理由。

いつも聞いている、ポッドキャスト「UIT inside」でおすすめしていたから。

テストシナリオ

ロケール毎（日、英、中）に、正しく言語切り替えが行われてるか確認する。
確認対象は、トップページのメイン部分、ヘッダー、フッター、記事一覧ページ。
また、各言語毎にトップページと記事一覧ページのスクリーショットを取得する。

テストコード

(Playwright設定方法については割愛します。)

ロケールと、テスト対象の文字列を配列に定義して、forEachで処理を回すようにしてみました。

./e2e/i18n.spec.ts

import { test, chromium, expect } from '@playwright/test'

const localeList = [
  {
    locale: 'en-US',
    language: 'English',
    textMain: 'Multilingual Site',
    textHeader: 'News',
    textFooter: 'About Us',
    textNews: 'News List'
  },
  {
    locale: 'ja-JP',
    language: 'Japanese',
    textMain: '多言語',
    textHeader: 'ニュース',
    textFooter: '私たちについて',
    textNews: 'ニュース一覧'
  },
  {
    locale: 'zh-CN',
    language: 'Chinese',
    textMain: '多语言网站',
    textHeader: '新闻',
    textFooter: '关于我们',
    textNews: '新闻列表'
  }
]

test.describe('Multilingual SiteTest', () => {
  localeList.forEach((item) => {
    test(`Page should be displayed in ${item.language} if the locale is ${item.locale}`, async () => {
      const browser = await chromium.launch()
      const context = await browser.newContext({
        locale: item.locale
      })
      const page = await context.newPage()
      await page.goto('http://localhost:3000')
      const main = page.locator('h1>span')
      const header = page.locator('header')
      const footer = page.locator('footer')
      expect(main).toContainText(`${item.textMain}`)
      expect(header).toContainText(`${item.textHeader}`)
      expect(footer).toContainText(`${item.textFooter}`)
      await page.screenshot({ path: `testImages/${item.locale}.png` })

      await page.goto(`http://localhost:3000/${item.locale}/news`)
      const mainNews = page.locator('h1')
      expect(mainNews).toContainText(`${item.textNews}`)
      await page.screenshot({ path: `testImages/${item.locale}-2.png` })

      await browser.close()
    })
  })
})

Playwrightを使用した理由。

テストシナリオ

テストコード

Discussion