Error: strict mode violation thrown with typescript child element test
async clickOnMatchingLink(tableLocator: Locator, nextButtonLocator: Locator, rowLocator: Locator, ColumnLocator: string, desiredText: string): Promise<void> { tableLocator.click(); const nextButtonElement = nextButtonLocator; const rows = rowLocator; const child = ColumnLocator;
while (await nextButtonElement.isVisible()) {
for (let i = 0; i < (await rows.count()); i++) {
const row = rows.nth(i);
const Column = row.locator(ColumnLocator);
//const Column = row.filter({ has: child });
console.log(await Column.textContent());
if (await Column.textContent() == desiredText) {
Column.locator("a").click();
await this.page.waitForTimeout(3000);
return;
}
}If I am passing ColumnLocator as a childLocator ( //const Column = row.filter({ has: child });) it throws Error: strict mode violation so I am passing it as a string. Is there a way I can pass child locator as a parameter and click the child element?
This thread is trying to answer question "Is there a way I can pass child locator as a parameter and click the child element without getting a 'strict mode violation' error?"
Related Ask AI answer for "How do I use the `locator.filter()` method in Playwright to pass a child locator as a parameter and click the child element without getting a 'strict mode violation' error?".
Answer
Sure, you can pass a child locator as a parameter and click the child element without getting a 'strict mode violation' error in Playwright. You can do this using the locator.filter() method.
Suppose you have this DOM structure:
<li><label>Hello</label></li>
<li><label>World</label></li>And you want to target the parent <li> of a label with text "Hello". You can use locator.filter() with page.getByText('Hello') like this:
const child = page.getByText('Hello');
const parent = page.getByRole('listitem').filter({ has: child });This way, you're specifying that you want to find the parent element that contains the specified child element. This is more reliable than using XPath.
But if there's no suitable locator for the parent element or if changes in DOM structure might break your tests, you can use XPath with xpath=... notation. Here's how:
const parent = page.getByText('Hello').locator('xpath=..');Remember, React locator functionality is experimental and prefixed with _. It might change in future versions of Playwright.
So, by using Playwright's locator.filter() method or XPath notation (xpath=...), you can pass a child locator as a parameter and click the child element without a 'strict mode violation' error.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.