The method of positioning elements in playwright

1. `page.$(selector)`

This method takes a CSS selector as a parameter and returns the first element that matches the selector. Returns if no matching element exists null. This method is often used to select elements with a specified ID or class.

const button = await page.$('#myButton'); // 通过 ID 选取按钮元素
const input = await page.$('.my-input'); // 通过 class 选取输入框元素
const link = await page.$('a[href="http://www.example.com"]'); // 选取指定链接元素

Note that this method will match elements in the order they appear in the DOM tree, so if the selector can match multiple elements, only the first matching element will be returned.

Often, page.$methods can be used in conjunction with other methods to achieve more complex element-wise operations.

2. `page.$$(selector)`

This method takes a CSS selector as a parameter and returns an array containing all elements that match the selector. Returns an empty array if no matching elements exist.

const buttons = await page.$$('button'); // 选取所有按钮元素
const texts = await page.$$('[class*="text"]'); // 选取所有包含 "text" 的 class 的元素

Note that the elements in the array returned by this method are in the same order as they appear in the DOM tree.

3. `page.locator(selector)`

This method creates a Locator object that can be used for more complex element positioning operations. This method accepts a CSS selector or XPath expression as a parameter and returns a Locator object.

Here's an example using a Locator object:

const button = page.locator('#myButton');
const text = page.locator('div[class="my-div"] > span');
const link = page.locator('a').withAttribute('href', 'http://www.example.com');

Since the Locator object is just syntactic sugar for creating a locator, it supports all methods and operations for locating elements.

4. `page.waitForSelector(selector[, options])`

This method waits for an element matching the specified CSS selector to appear on the page. This method accepts a CSS selector as a parameter, and an optional optionsparameter , and returns a Promise that resolves when the element appears or times out.

Here's an example using page.waitForSelectorthe method :

await page.waitForSelector('#myButton'); // 等待 ID 为 myButton 的按钮出现
await page.waitForSelector('.my-div > span', {
    
     visible: true }); // 等待 .my-div 中的可见 span 元素出现

optionsParameters can contain the following items:

visible: A boolean value indicating whether the element must be visible or not. Default is false.
hidden: A boolean value indicating whether the element must be hidden. Default is false.
timeout: Wait timeout in milliseconds. The default is 30 seconds.

This method is suitable for scenarios that need to wait for a specific element to appear, such as an element that waits for the loading to complete after the page is refreshed.

5. `page.waitForFunction(pageFunction[, options[, ...args]])`

This method uses the specified anonymous function or string expression to locate and returns a Promise that resolves when the function returns true or times out.

Here's an example using page.waitForFunctionthe method :

await page.waitForFunction(() => document.querySelector('#myButton').disabled === false); // 等待按钮变成可用状态
await page.waitForFunction('document.querySelector(".my-div span").textContent === "Hello World!"'); // 等待 span 元素的内容被更新

optionsParameters can contain the following items:

polling: Interval (in milliseconds) between check functions. The default is 1 second.
timeout: Wait timeout in milliseconds. The default is 30 seconds.

This method is suitable for scenarios that need to wait for complex or dynamically generated elements to appear, such as elements that wait for an AJAX request to complete.

Summarize

In Playwright, there are many ways to select and locate elements, each of which can be selected using CSS selectors or XPath expressions, so that developers can choose according to their own needs and scenarios.