El método de posicionamiento de elementos en el dramaturgo.

1.`page.$(selector)`

Este método toma un selector CSS como parámetro y devuelve el primer elemento que coincide con el selector. Devuelve si no existe ningún elemento coincidente null. Este método se usa a menudo para seleccionar elementos con una ID o clase específica.

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

Tenga en cuenta que este método hará coincidir los elementos en el orden en que aparecen en el árbol DOM, por lo que si el selector puede hacer coincidir varios elementos, solo se devolverá el primer elemento coincidente.

A menudo, page.$los métodos se pueden usar junto con otros métodos para lograr operaciones de elementos más complejas.

2.`page.$$(selector)`

Este método toma un selector CSS como parámetro y devuelve una matriz que contiene todos los elementos que coinciden con el selector. Devuelve una matriz vacía si no existen elementos coincidentes.

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

Tenga en cuenta que los elementos de la matriz devueltos por este método están en el mismo orden en que aparecen en el árbol DOM.

3.`page.locator(selector)`

Este método crea un objeto Locator que se puede utilizar para operaciones de posicionamiento de elementos más complejas. Este método acepta un selector CSS o una expresión XPath como parámetro y devuelve un objeto Locator.

Aquí hay un ejemplo usando un objeto Locator:

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');

Dado que el objeto Locator es solo azúcar sintáctico para crear un localizador, admite todos los métodos y operaciones para localizar elementos.

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

Este método espera a que aparezca en la página un elemento que coincida con el selector de CSS especificado. Este método acepta un selector de CSS como parámetro y un optionsparámetro y devuelve una Promesa que se resuelve cuando el elemento aparece o se agota el tiempo de espera.

Aquí hay un ejemplo usando page.waitForSelectorel método :

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

optionsLos parámetros pueden contener los siguientes elementos:

visible: Un valor booleano que indica si el elemento debe ser visible o no. El valor predeterminado es false.
hidden: un valor booleano que indica si el elemento debe ocultarse. El valor predeterminado es false.
timeout: Tiempo de espera en milisegundos. El valor predeterminado es 30 segundos.

Este método es adecuado para escenarios que necesitan esperar a que aparezca un elemento específico, como un elemento que espera a que se complete la carga después de actualizar la página.

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

Este método utiliza la función anónima especificada o la expresión de cadena para localizar y devolver una Promesa que se resuelve cuando la función devuelve verdadero o se agota el tiempo de espera.

Aquí hay un ejemplo usando page.waitForFunctionel método :

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

optionsLos parámetros pueden contener los siguientes elementos:

polling: Intervalo (en milisegundos) entre funciones de verificación. El valor predeterminado es 1 segundo.
timeout: Tiempo de espera en milisegundos. El valor predeterminado es 30 segundos.

Este método es adecuado para escenarios que necesitan esperar a que aparezcan elementos complejos o generados dinámicamente, como elementos que esperan a que se complete una solicitud AJAX.

Resumir

En Playwright, hay muchas formas de seleccionar y ubicar elementos, cada uno de los cuales se puede seleccionar mediante selectores CSS o expresiones XPath, para que los desarrolladores puedan elegir según sus necesidades y escenarios.