experimental/browser: strict mode violation, multiple elements returned for selector query

[luka-nikolic]

Brief summary

When multiple elements match selector and I want to execute click() on locator I get error: Uncaught (in promise) clicking on "[data-action="add-to-cart"][aria-label="In den Warenkorb"][data-quantity-input="#quantity"]": strict mode violation, multiple elements returned for selector query

Code example:

    const addToCartButton = page.locator('[data-action="add-to-cart"][aria-label="In den Warenkorb"]');
    await addToCartButton.click();

k6 version

v0.51.0

OS

Windows 10

Docker version and image (if applicable)

No response

Steps to reproduce the problem

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
  thresholds: {
    checks: ["rate==1.0"]
  }
}

export default async function () {
  const page = browser.newPage({extraHTTPHeaders: HEADERS});

  try {
    await page.goto(BASE_URL);
    const addToCartButton = page.locator('[data-action="add-to-cart"][aria-label="In den Warenkorb"]');
    await addToCartButton.click();
  } finally {
    page.close();
  }
}

There are multiple elements on page that match selector [data-action="add-to-cart"][aria-label="In den Warenkorb"].
It fails when i execute click() method

Expected behaviour

.locator() should return only the first element that matches the selector (similar to how HTML DOM Document querySelector() works).

Actual behaviour

.locator() return multiple elements.

[nexus9111]

Is this fix ? I actually face this issue.

[ankur22]

@nexus9111, if there are multiple elements that match the selector, then you will see the "strict mode violation" error. You will need to ensure that the element can be uniquely identified with a unique selector to it.