Playwrightのnthとは
Playwrightのnth(n)はn番目に一致した要素へのロケーターを返します。
nth(0) は最初の要素を選択します。
例えば以下のようなHTMLがあったとします。
HTML
<p>最初の段落</p>
<p>２の段落</p>
<p>３の段落</p>
<p>４の段落</p>
<p>最後の段落</p>この場合、CSSのnth-childを知っている方であれば、最初の段落を「nth(1)」で指定したくなりますが、Playwrightでは「nth(0)」で指定します。
JavaScript
test('paragraph test', async ({ page }) => {
await page.goto('https://iwb.jp/s/playwright-test-nth-first-0/');
await expect(page.getByRole('paragraph').nth(0)).toHaveText('最初の段落')
await expect(page.getByRole('paragraph').nth(1)).toHaveText('２の段落')
await expect(page.getByRole('paragraph').nth(2)).toHaveText('３の段落')
await expect(page.getByRole('paragraph').nth(3)).toHaveText('４の段落')
await expect(page.getByRole('paragraph').nth(4)).toHaveText('最後の段落')
})URL先のHTMLの場合は、nth(0) は first() 、nth(4) は last() と書いても同じです。
JavaScript
test('paragraph test', async ({ page }) => {
await page.goto('https://iwb.jp/s/playwright-test-nth-first-0/');
await expect(page.getByRole('paragraph').first()).toHaveText('最初の段落')
await expect(page.getByRole('paragraph').nth(1)).toHaveText('２の段落')
await expect(page.getByRole('paragraph').nth(2)).toHaveText('３の段落')
await expect(page.getByRole('paragraph').nth(3)).toHaveText('４の段落')
await expect(page.getByRole('paragraph').last()).toHaveText('最後の段落')
})
