CODEWITHSUNDEEP
javascriptplaywright
flamey
flamey

Reputation: 2379

Unable to get isDisabled() to work in Playwright

I need to check that a button is disabled (checking for a last page of a table). There are two with the same id (top and bottom of the table).

const nextPageButtons = await this.page.$$('button#_btnNext'); // nextPageButtons.length is 2, chekced via console.log
const nextPageButtonState = await nextPageButtons[0].isDisabled();

But when I do the above I get: elementHandle.isDisabled: Unable to adopt element handle from a different document.

Why doesn't this work?

Upvotes: 5

Views: 22230

Answers (4)

nivlac
nivlac

Reputation: 390

This is the solution I used, which condenses Zekarias's answer into a single line:

await expect(page.getByRole("button", { name: "Save" })).toBeDisabled();

Doesn't address the question exactly, but this came up first in Google when I was wondering how to check if a button was disabled - so hope it helps someone else out ;)

Upvotes: 1

Zekarias Taye Hirpo
Zekarias Taye Hirpo

Reputation: 847

To add on the first accepted answer, we can also do this:

  // given
 const saveButton = page.getByRole('button', { name: 'Save' });

// then
 expect(saveButton.isDisabled()).toBeTruthy();

Upvotes: 2

Vishal Aggarwal
Vishal Aggarwal

Reputation: 4177

Use of page.$$ is discouraged per playwright docs.

WHY?

Because it's static , once defined it stays the same throughout the test even though in between test page may refresh or re- loaded for any reason and the element definition may become stale which may cause the classic "Stale element reference" issue.People coming from selenium world will recognize it instantly.

Use locator-based page.locator() toBeDisabled method instead.

WHY?

The biggest difference between the Locator and ElementHandle is that the ElementHandle points to a particular element, while Locator captures the logic of how to retrieve an element.

This happens because locator definitions are evaluated lazily only when an action is performed like 'click' using them instead of at the time of declaring the locator which makes it truly dynamic as now even if the pages gets refreshed or re- loaded and an action is performed using one of those locators will not affected as its definition will be evaluated only when it's used in 'action' so you will never encounter stale element reference exception error.

Even if you go back to previous page and come back , any locator still works as is.

Example:

const locator = page.locator('yourLocator');
await expect(locator).toBeDisabled();

Upvotes: 1

flamey
flamey

Reputation: 2379

So, this works:

const nextPageButtons = await this.page.$$('button#_btnNext');
const nextPageButton1 = await nextPageButtons[0];
const nextPageButton1State = await nextPageButton1.isDisabled();

Upvotes: 3

Related Questions