Advanced Playwright TypeScript Tutorial | Locator Strategies | Part IV | LambdaTest

From The House of LambdaTest LambdaTest Tutorials
1

:rocket: Hey Testers! Our new video is live! :movie_camera:

“Advanced Playwright TypeScript Tutorial | Locator Strategies”. Learn how to master locator strategies and write robust Playwright tests like a pro.

:point_right: Check it out now:

2

Use Playwright’s Advanced Locator Strategies for Element Selection In Playwright, you can use advanced locator strategies to find elements more reliably. Playwright provides several methods to locate elements that can be applied with different conditions such as text, CSS selectors, XPath, and more.

Example:

import { test, expect } from '@playwright/test';

test('Advanced Locator Strategies', async ({ page }) => {
  await page.goto('https://example.com');
  
  // Using text locator strategy to find an element by visible text
  const elementByText = page.locator('text=Sign up');
  await expect(elementByText).toBeVisible();
  
  // Using CSS selector for more specific targeting
  const elementByCss = page.locator('button#submit');
  await expect(elementByCss).toBeVisible();
  
  // Using XPath for precise matching
  const elementByXPath = page.locator('//button[text()="Submit"]');
  await expect(elementByXPath).toBeVisible();
  
  // Combining multiple strategies for a more robust solution
  const combinedLocator = page.locator('button#submit >> text=Submit');
  await expect(combinedLocator).toBeVisible();
});

By using the text, CSS selectors, and XPath, you can build more reliable and flexible locators that can be used based on the context of your elements.

3

Use Playwright’s locator with hasText for Dynamic Text Matching Playwright allows you to use the locator strategy in combination with text matching to handle dynamic content. This method works well when you need to check elements that may change based on user interaction or time.

Example:

import { test, expect } from '@playwright/test';

test('Locator with dynamic text matching', async ({ page }) => {
  await page.goto('https://example.com');

  // Using locator with dynamic text matching
  const dynamicElement = page.locator('button', { hasText: 'Click Me' });
  await expect(dynamicElement).toBeVisible();
  
  // Wait for dynamic content to appear
  await expect(dynamicElement).toHaveText(/Click Me/);
});

Using hasText, you can search for elements containing certain text within them, allowing you to handle more dynamic or unpredictable content.

4

Utilize Playwright’s locator with nth Index for Handling Multiple Elements When handling elements that appear multiple times on a page, using the nth index strategy can help target specific elements in a list or group.

Example:

import { test, expect } from '@playwright/test';

test('Handling multiple elements with nth index locator strategy', async ({ page }) => {
  await page.goto('https://example.com');
  
  // Locate the second item in a list of links
  const secondLink = page.locator('ul li >> nth=1'); // Index starts at 0
  await expect(secondLink).toHaveText('Link 2');
  
  // Use nth strategy for buttons in a group
  const thirdButton = page.locator('button >> nth=2');
  await expect(thirdButton).toBeVisible();
});

The nth index allows for precise targeting of an element in a list or collection, which is especially helpful when elements are dynamically generated or have the same tag and structure.