How to Check Element Enabled in Playwright

By AravindPlaywright Tutorial

Before interacting with any element(like clicking a button, selecting a checkbox, or typing text in an input field) in Playwright automation testing, it’s essential to verify whether the element is enabled or disabled. Verifying whether an element enabled in Playwright automation is one of the most common and essential use cases in automation testing.

Attempting to interact with a disabled element can lead to test failures and unstable test scripts. Checking an element’s state is a crucial step in building reliable and robust Playwright test scripts. This best practice helps ensure smoother test execution and prevents unnecessary errors during automated UI testing.

In this Playwright automation guide, we will explore various methods to determine whether an element is enabled before interacting with it. Techniques such as isEnabled(), getAttribute(), and evaluate() will be covered to help you write more reliable and error-free test scripts.

Using isEnabled() to Check if an Element is Enabled in Playwright

One of the most straightforward methods to check if an element is enabled in Playwright is by using the isEnabled() method. This method returns true if the element is enabled and false if it is disabled.

Let’s take a look at how to use the isEnabled() method in Playwright with an example:

Example to check element is enabled using isEnabled() 

const { test, expect } = require('@playwright/test');

test('Example: Check if element enabled using isEnabled() in Playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

//Check if element enabled.
const checkbox = page.locator('#remember-me');
const isEnabled = await checkbox.isEnabled();

if (isEnabled) {
    console.log('Checkbox is Enabled');
    await checkbox.click();
} else {
  console.log('Checkbox is disabled');
}
});
Check if element enabled using isEnabled() in Playwright

Code breakdown

  • page.locator(‘#remember-me’) will find the element with the ID remember-me (in this case, likely a checkbox).
  • await checkbox.isEnabled() will asynchronously check whether the located checkbox element is enabled.
  • isEnabled() method returns a boolean true if the element is enabled and false if the element is disabled.
  • If condition will check if isEnabled is true. If true, it will log a message “Checkbox is Enabled” in the console and select the checkbox.
  • Else it will log a message “Checkbox is disabled”.

Verify if the element is enabled using getAttribute() in Playwright

You can use the getAttribute() method in Playwright to read an element’s enabled or disabled status. This method allows you to check for the presence of the disabled attribute, which indicates whether an element is interactable or not. If the attribute is present, the element is considered disabled; if it’s absent, the element is enabled.

Let us see how to check element is enabled using getAttribute() in Playwright.

Example to check element is enabled using getAttribute(‘disabled’)

const { test, expect } = require('@playwright/test');

test('Example: Check if element enabled using getAttribute() in Playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

//Ccheck if element enabled.
const isDisabled = await page.locator('#remember-me').getAttribute('disabled') !== null;
const isEnabled = !isDisabled;

if (isEnabled) {
    console.log('Checkbox is Enabled');
} else {
  console.log('Checkbox is disabled');
}
});
Check if element enabled using getAttribute() in Playwright

Code Breakdown

  • page.locator(‘#remember-me’): locate the element by id remember-me.
  • .getAttribute(‘disabled’): Retrieves the value of the disabled attribute on the selected element.
  • If the attribute exists, it means the element is disabled.
  • If it returns null, the attribute is not present, meaning the element is enabled.

Verify the element is enabled using evaluate()

You can directly evaluate an element’s disabled property using the evaluate() function in Playwright. This method allows you to access and check the actual DOM property of the element in the browser context. It returns a boolean value—true if the element is disabled, and false if it is enabled.

Example to check element is enabled using evaluate()

const { test, expect } = require('@playwright/test');

test('Example: Check if element enabled using evaluate() in Playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

//Ccheck if element enabled.
const isEnabled = await page.locator('#remember-me').evaluate(button => !button.disabled);

if (isEnabled) {
    console.log('Button is Enabled');
} else {
  console.log('Button is disabled');
}
});
Check if element enabled using evaluate() in Playwright

Code Breakdown

  • .evaluate(button => !button.disabled):
    • evaluate() method allows you to execute JavaScript code in the browser context.
    • button => !button.disabled is an arrow function that receives the element (button) as an argument.
    • button.disabled returns true if the element is disabled, false if enabled.

Final Thoughts

In Playwright automation testing, it’s essential to verify whether an element is enabled, especially when you’re unsure of its state on page load or after user interactions. Interacting with a disabled element can cause your tests to fail or behave unexpectedly. To ensure your scripts are stable and reliable, you can use methods like isEnabled(), getAttribute(), and evaluate() to check if an element is enabled before performing any actions.

Leave a Reply

Your email address will not be published. Required fields are marked *