Playwright Page LocatorDocs

getByAltText
Docs

Allows locating elements by their alt text. For example, this method will find the image by alt text "Castle":

Example Test :

<img alt='Castle' src="castle.jpg">

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page.getByAltText('Castle')).toBeVisible()
})
getByLabel
Docs

Allows locating input elements by the text of the associated label. For example, this method will find the input by label text Password in the following DOM:

Example Test :

<label for="password-input">Password:</label>
<input id="password-input" type="password">

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page.getByLabel('password-input')).toBeVisible()
})
getByPlaceholder
Docs

Allows locating input elements by the placeholder text. For example, this method will find the input by placeholder "Country":

Example Test :

<input placeholder="Country">

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page.getByPlaceholder('Country')).toBeVisible()
})
getByRole
Docs

Allows locating elements by their ARIA role, ARIA attributes and accessible name. Note that role selector does not replace accessibility audits and conformance tests, but rather gives early feedback about the ARIA guidelines. <"alert" | "blockquote"| "button"| "textbox"| "checkbox"| "combobox"| "dialog" | "figure" | "heading"| "img" | "link" | "option" | "radio">

Example Test :

<button type='submit'>submit</button>
<a href="#">Get Started</a>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page.getByRole('button', {name: 'submit'})).toBeVisible()
  await expect(page.getByRole('link', {name: 'Get Started'})).toBeVisible()
})
getByTestId
Docs

Locate element by the test id. By default, the data-testid attribute is used as a test id. Use selectors.setTestIdAttribute(attributeName) to configure a different test id attribute if necessary.

Example Test :

<h1 data-testid="heading1">Heading 1</h1>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page.getByTestId('heading1')).toBeVisible()
})
getByText
Docs

Allows locating elements that contain given text.

Example Test :

<p>Paragraph Text</p>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page.getByText('Paragraph Text')).toBeVisible()
})
getByTitle
Docs

Allows locating elements by their title. For example, this method will find the button by its title "Submit":

Example Test :

<button title='Place the order'>Order Now</button>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test toBeVisible', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page.getByTitle('Place the order')).toBeVisible()
})
goto
Docs

url <string> URL to navigate page to. The url should include scheme, e.g. https://. When a baseURL via the context options was provided and the passed URL is a path, it gets merged via the new URL() constructor. Returns the main resource response. In case of multiple redirects, the navigation will resolve with the first non-redirect response.

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test goto', async ({ page }) => {
  await page.goto('/playwright-locator');
  await expect(page).toHaveURL("/playwright-locator")
})
click
Docs

This method clicks an element matching selector by performing the following steps: 1. Find an element matching selector. If there is none, wait until a matching element is attached to the DOM. 2. Wait for actionability checks on the matched element, unless force option is set. If the element is detached during the checks, the whole action is retried. 3. Scroll the element into view if needed. 4. Use page.mouse to click in the center of the element, or the specified position. 5. Wait for initiated navigations to either succeed or fail, unless noWaitAfter option is set.

Example Test :

<textarea type="text" data-testid="textarea-component" placeholder="Textarea Component"></textarea>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test click', async ({ page }) => {
  await page.goto('/playwright-locator');
  await page.getByTestId("textarea-component").click();
	await page.getByTestId("textarea-component").fill("textarea");
})
fill
Docs

This method waits for an element matching selector, waits for actionability checks, focuses the element, fills it and triggers an input event after filling. Note that you can pass an empty string to clear the input field. If the target element is not an <input>, <textarea> or [contenteditable] element, this method throws an error. However, if the element is inside the <label> element that has an associated control, the control will be filled instead. To send fine-grained keyboard events, use page.type(selector, text[, options]).

Example Test :

<input data-testid="input-component" type="text" placeholder="Input Component" value="">
<input data-testid="inputpassword-component" type="password" placeholder="Input Password Component" value="">
<input type="date" placeholder="Input Date" value="">

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test fill', async ({ page }) => {
  await page.goto('/playwright-locator');
  await page.getByTestId("input-component").click();
	await page.getByTestId("input-component").fill("input");
  await page.getByTestId("inputpassword-component").click();
	await page.getByTestId("inputpassword-component").fill("password");
  await page.locator('input[type="date"]').fill("2022-10-13");
})
check
Docs

This method checks an element matching selector by performing the following steps: 1. Find an element matching selector. If there is none, wait until a matching element is attached to the DOM. 2. Ensure that matched element is a checkbox or a radio input. If not, this method throws. If the element is already checked, this method returns immediately. 3. Wait for actionability checks on the matched element, unless force option is set. If the element is detached during the checks, the whole action is retried. 4. Scroll the element into view if needed. 5. Use page.mouse to click in the center of the element. 6. Wait for initiated navigations to either succeed or fail, unless noWaitAfter option is set. 7. Ensure that the element is now checked. If not, this method throws.

Example Test :

<input data-testid="radio-red" name="red" type="radio" value="red">
<input data-testid="radio-blue" name="blue" type="radio" value="blue"> 

<input data-testid="checkbox-red" name="red" type="checkbox" value="red">
<input data-testid="checkbox-blue" name="blue" type="checkbox" value="blue">

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test check', async ({ page }) => {
  await page.goto('/playwright-locator');
  await page.getByTestId("radio-red").check();
	await page.getByTestId("radio-blue").check();

	await page.getByTestId("checkbox-red").check();
	await page.getByTestId("checkbox-blue").check();
})
uncheck
Docs

This method unchecks an element matching selector by performing the following steps: 1. Find an element matching selector. If there is none, wait until a matching element is attached to the DOM. 2. Ensure that matched element is a checkbox or a radio input. If not, this method throws. If the element is already unchecked, this method returns immediately. 3. Wait for actionability checks on the matched element, unless force option is set. If the element is detached during the checks, the whole action is retried. 4. Scroll the element into view if needed. 5. Use page.mouse to click in the center of the element. 6. Wait for initiated navigations to either succeed or fail, unless noWaitAfter option is set. 7. Ensure that the element is now unchecked. If not, this method throws.

Example Test :

<input data-testid="checkbox-red" name="red" type="checkbox" value="red">
<input data-testid="checkbox-blue" name="blue" type="checkbox" value="blue">

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test uncheck', async ({ page }) => {
  await page.goto('/playwright-locator');
  await page.getByTestId("checkbox-red").check();
	await page.getByTestId("checkbox-blue").check();
  await page.getByTestId("checkbox-blue").uncheck();
	await page.getByTestId("checkbox-red").uncheck();
})
uncheck
Docs

Ensure that checkbox or radio element is unchecked.

Example Test :

<input type="checkbox" defaultChecked />

Example Test :

import { test } from '@playwright/test';
              
test('test uncheck', async ({ page }) => {
  await page.goto('/playwright-locator');
  const element = page.getByTestId('uncheck');
  const isChecked = await element.isChecked();
  console.log(isChecked);
  expect(isChecked).toBe(true);
  await element.uncheck();
  const isUnchecked = await element.isChecked();
  console.log(isUnchecked);
  expect(isUnchecked).toBe(false);
})
setChecked
Docs

Set the state of a checkbox or a radio element.

Example Test :

<input type="checkbox" />

Example Test :

import { test } from '@playwright/test';
              
test('test setChecked', async ({ page }) => {
  await page.goto('/playwright-locator');
  const element = page.getByTestId('setChecked');
  await element.setChecked(true);
  const isChecked = await element.isChecked();
  console.log(isChecked);
  expect(isChecked).toBe(true);
  await element.setChecked(false);
  const isUnchecked = await element.isChecked();
  console.log(isUnchecked);
  expect(isUnchecked).toBe(false);
})
selectOption
Docs

This method waits for an element matching selector, waits for actionability checks, waits until all specified options are present in the <select> element and selects these options. If the target element is not a <select> element, this method throws an error. However, if the element is inside the <label> element that has an associated control, the control will be used instead. Returns the array of option values that have been successfully selected. Triggers a change and input event once all the provided options have been selected.

Example Test :

<select data-testid="select" name="select">
  <option value="red" data-testid="option-red">Red</option>
  <option value="blue" data-testid="option-blue">Blue</option>
</select>

Example Test :

import { test, expect } from '@playwright/test';
              
test('Test selectOption', async ({ page }) => {
  await page.goto('/playwright-locator');
  await page.getByTestId("select").selectOption("red");
  await page.getByTestId("select").selectOption("blue");
})
isChecked
Docs

Returns whether the element is checked. Throws if the element is not a checkbox or radio input.

Example Test :

<input type="checkbox" defaultChecked />

Example Test :

import { test } from '@playwright/test';
              
test('Test isChecked', async ({ page }) => {
  const checkbox = page.getByRole('checkbox');
  const isChecked = await checkbox.isChecked();
  console.log(isChecked);
  expect(isChecked).toBe(true);
})
isDisabled
Docs

Returns whether the element is disabled, the opposite of enabled.

Example Test :

<button type="submit" disabled>
  Button
</button>

Example Test :

import { test } from '@playwright/test';
              
test('Test isDisabled', async ({ page }) => {
  const button = page.getByRole('button', { name: 'Button' });
  const isDisabled = await button.isDisabled();
  console.log(isDisabled);
  expect(isDisabled).toBe(true)
})
isEditable
Docs

Returns whether the element is editable.

Example Test :

<input type="text" placeholder='Input'/>

Example Test :

import { test } from '@playwright/test';
              
test('Test isEditable', async ({ page }) => {
  const input = page.getByRole('input');
  const isEditable = await input.isEditable();
  console.log(isEditable);
  expect(isEditable).toBe(true);
})
isEnabled
Docs

Returns whether the element is enabled.

Example Test :

<input type="text" placeholder='Input'/>

Example Test :

import { test } from '@playwright/test';
              
test('Test isEnabled', async ({ page }) => {
  const input = page.getByRole('input');
  const isEnabled = await input.isEnabled();
  console.log(isEnabled);
  expect(isEnabled).toBe(true);
})
isHidden
Docs

Returns whether the element is hidden, the opposite of visible.

Example Test :

<input type="hidden"/>

Example Test :

import { test } from '@playwright/test';
              
test('Test isHidden', async ({ page }) => {
  const input = page.getByRole('input');
  const isHidden = await input.isHidden();
  console.log(isHidden);
  expect(isHidden).toBe(true);
})
isVisible
Docs

Returns whether the element is visible.

Example Test :

<input type="text" placeholder='Input' />

Example Test :

import { test } from '@playwright/test';
              
test('Test isVisible', async ({ page }) => {
  const input = page.getByRole('input');
  const isVisible = await input.isVisible();
  console.log(isVisible);
  expect(isVisible).toBe(true);
})