javascript - Playwright - Locator-fel : strikt lägesöverträdelse

Jag får följande fel när jag kör testet. Jag är ganska ny på Playwright och programmering, så jag är inte säker på vad lösningen är

Error: locator.click: Error: strict mode violation: getByRole('button', { name: 'Statements' }) resolved to 2 elements:
1) <button title="Statements" aria-label="Statements" data-…>Statements</button> aka locator('#lp_line_6_a11y_queue').getByRole('button', { name: 'Statements' })
2) <button title="Statements" aria-label="Statements" data-…>Statements</button> aka locator('#lp_line_6').getByRole('button', { name: 'Statements' })

Jag körde precis testet och hoppades att inte se något fel.

test('test', async ({ page }) => {
  await page.goto('https://www.test.com');    
  await page.getByPlaceholder('Section tag #1').click();
  await page.getByPlaceholder('Section tag #1').press('Control+a');
  await page.getByPlaceholder('Section tag #1').fill('inapptest');

  await page.getByRole('button', { name: 'UPDATE' }).click();
  await page.getByRole('button', { name: 'Message us' }).click();
  await page.getByPlaceholder('Enter text here').click();
  await page.getByPlaceholder('Enter text here').fill('hi');

  await page.getByPlaceholder('Enter text here').press('Enter');  
  await page.getByRole('button', { name: 'Statements' }).click();
  await page.getByRole('button', { name: 'Get statements' }).click();
});`

Svar #1

Lokatorstrikthet

Locator-API:et är strikt, vilket betyder att om det hittar mer än ett element med din selektor och du försöker kalla på en locator, som .click(), så kommer det att kasta ett fel.

Titta på avsnittet om stränghet här. Jag hoppas att detta hjälper.

https://playwright.dev/docs/locators#strictness https://playwright.dev/docs/api/class-locator

Du kan uttryckligen välja att inte delta i striktkontrollen genom att berätta för Playwright vilket element som ska användas när flera element matchar, genom locator.first(), locator.last() och locator.nth().

await page.getByRole('button', { name: 'Statements' }).first().click();

Obs: Dessa metoder rekommenderas inte eftersom Playwright kan klicka på ett element du inte avsåg när din sida ändras. Följ istället bästa praxis för att skapa en lokaliserare som unikt identifierar målelementet.

Filtrering av lokatorer:

För att göra det unikt kan du ytterligare filtrera det efter text:

Exempel :

await page
    .getByRole('listitem')
    .filter({ hasText: 'Product 2' })
    .getByRole('button', { name: 'Add to cart' })
.click();

Flera element:

Självklart kan du också hitta flera element om du behöver, till exempel antalet tabellrader.

await page.locator('tr').first().waitFor();
console.log(await page.locator('tr').count());

Eller hämta hela tabellens data:

const table = await page.locator('.mytable')
const data = await table.evaluate((tableLocator) => {
    const rows = Array.from(tableLocator.querySelectorAll('tr'))
    return rows.map((row) => {
        const cells = Array.from(row.querySelectorAll('td'))
        return cells.map((cell) => cell.textContent.trim())
    });
});
console.log("data--> "+ data)