Menu
I want to check how many (if it's like in config) I have disabled elements.
In Cypress it'd be like that:
cy.visit('https://example.cypress.io/commands/actions');
const disabledElementsLength = 0;
const enabledElementsLength = 9;
cy.get('button').not(':disabled').should((elem) => {
expect(elem).to.have.length(enabledElementsLength);
});
cy.get(`button`).filter(':disabled').should((elems) => {
expect(elems).to.have.length(disabledElementsLength);
});
but I can't make it work for myself in Playwright
I have page with
import { selectors, expect, request } from '@playwright/test';
export class MyPage {
readonly element: Locator;
constructor(public readonly page: Page) {
selectors.setTestIdAttribute('data-test-id');
this.element = this.page.locator(`[data-test-id^="specific-element"]`);
}
}
I thought of just filter over... but seems like it doesn't have method filter available to this array of elements
async selectDisabledElements() {
return this.element.evaluate((elements) =>
elements.filter((button: any) => element.disabled),
);
}
297
asked Sep 01 '25 01:09
You might try using :disabled directly on your CSS selectors, and using :not to invert the condition:
import {expect, test} from "@playwright/test"; // ^1.38.0
const html = `<!DOCTYPE html><html>
<body>
<button disabled>A</button>
<button>B</button>
<button disabled>C</button>
<button disabled>D</button>
<button>E</button>
</body>
</html>`;
test.beforeEach(({page}) => page.setContent(html));
test("3 disabled buttons", async ({page}) => {
await expect(page.locator("button:disabled")).toHaveCount(3);
});
test("2 enabled buttons", async ({page}) => {
await expect(page.locator("button:not(:disabled)")).toHaveCount(2);
});
With test ids, you can either use [data-test-id="foo"] in the above code, or getByTestId as in the following example:
import {expect, selectors, test} from "@playwright/test";
const html = `<!DOCTYPE html><html>
<body>
<button data-test-id="foo" disabled>A</button>
<button data-test-id="foo">B</button>
<button data-test-id="foo" disabled>C</button>
<button data-test-id="foo" disabled>D</button>
<button data-test-id="foo">E</button>
</body>
</html>`;
test.beforeEach(({page}) => {
selectors.setTestIdAttribute("data-test-id");
return page.setContent(html);
});
test("3 disabled buttons", async ({page}) => {
const loc = page
.getByTestId("foo")
.locator(":scope:disabled");
await expect(loc).toHaveText(["A", "C", "D"]);
});
test("2 enabled buttons", async ({page}) => {
const loc = page
.getByTestId("foo")
.locator(":scope:not(:disabled)");
await expect(loc).toHaveText(["B", "E"]);
});
there are 2 steps for take all enabled element with locator in playwrigth (docs enabled here(link)):
for example:
const activeElements: Locator[]= [];
await (await await page.locator('your locator')).all())
.map(async (el: Locator) => {
if (await el.isEnabled()) {
activeElements.push(el);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With