Open2024/08/14にコメント追加3

Playwight メソッドメモ

テストケース全体

describe
beforeEach
afterEach

describe

テストのグループを宣言する
- グループの中に、そのテストグループを構成する小さなテストをいくつかぶち込む形になる
- グループの中にグループを入れるみたいな形でネストする使い方もできる

test.describe('two tests', () => {
  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

beforeEach

各テストケースが実行される前に実行するコードを記述する

test.beforeEach(async ({ page }) => {
    // 各テストケースの実行前にローカル環境にアクセス
    await page.goto('http://localhost:3000/')
})

afterEach

各テストケースが実行された後に実行するコードを記述する

  test.afterEach(async ({ page }) => {
    await page.evaluate(() => {
    // 各テストケースの実行後にローカルストレージをクリア
      localStorage.clear()
    })
  })

DOMの取得

locator
first
nth
getByTestId
getByLabel

locator

特定のプロパティを持つ要素を取得する
HTMLタグ、Class、data属性など大体のものは使える

const group = page.locator('[data-path="group"]')

first

取得した要素の最初の要素を取得する

const groups = page.locator('[data-path="group"]')
const firstGroup = groups.first()

nth

指定したインデックスの要素を取得する
引数に 0 を渡した場合は first()と同じ結果を返す

const groups = page.locator('[data-path="group"]')
const secondGroup = groups.nth(1)

getByTestId

data-testidの属性を持つ要素を取得する

<button data-testid="button">ボタン</button>

const button = page.getByTestId('button')

getByLabel

引数に一致するラベルを持つ要素を取得する

const inputField = page.getByLabel("シナリオ名")

DOMの操作

click
dblclick
fill

click

取得した要素をクリックする

const button1 = page.getByTestId('button1').first()
const button2 = page.getByTestId('button2').first()

await button1.click()
await button2.click()

fill

フィールドに値を設定する

const inputField = page.getByTestId("input-field")
await inputField.fill('テキスト入力')