Selectores

Existe una aplicacion para Chrome y Firefox que se llama Selectos Hub, y te permite encontrar los selectores mucho mas facil, es solo inspeccionar y el te dice cual es el codigo del selector. Te ahorras muchisimo tiempo.

Selectores

Cuando se desea trabajar en pruebas directas para obtener y realizar ciertos casos alrededor de un elemento o componente dentro de un aplicativo web, es necesario poder inidicarle a Playwright que se dispondrá de una entidad.
.

ℹ️ Definición
Los selectores son cadenas de texto usadas para create localizadores (Locators), los cuales describen la forma para encontrar un elementos en una página.

.
En Playwright, los localizadores son funciones construidas que permiten seleccionar un elemento dentro una estructura compleja de un documento web. Por ejemplo:

.

• page.getByRole() , para localizar de manera explícita o implícita atributos de un elemento
• page.getByText() , para localizar por texto a un elemento

.

Método locator

📌 Referencia
El método page.locator() es una implementación legacy de Playwright que puede ser usado para implementar y accionar selectores.
locator | Playwright

.

✨ Concepto clave
El localizador se resuelve en el elemento inmediatamente antes de realizar una acción, por lo que una serie de acciones en el mismo localizador se pueden realizar en diferentes elementos del DOM.

.

Locators modernos

Para Playwright, los locators son la parte centrar en la representación, obtención y ejecución de cualquier elemento de una página web.
.
De la mano de la documentación, es posible categorizar a los localizadores en:

.

• Obtención de elementos
• Filtro de elementos
• Agrupación de elementos

.

✨ Concepto clave
La diferencia entre una obtención y un filtrado, es la consideración donde se pivoteará la selección (absoluta o relativa).

.

📌 Referencia
Locators | Playwright

.

Estube buscando en la documentacion de los selectores pero ya no se encuentran disponibles en el sitio oficial

Así quedo el test de la forma clásica:

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

test("test", async ({ page }) => {
  await page.goto("about:blank");
  await page.goto("/");
  await page.getByText("Aristotle").click();
  await page.locator('a.nav-link:has-text("Resources")').click();
  await page.locator('a.nav-link:has-text("Home")').click();
  await page.locator('a:has-text("Click")').click();
  await page.locator('button:has-text("Button That Ignores DOM Click Event")').click();
});

Si desean aprender un poco más sobre técnicas de xpath, puede revisar esta página
https://www.guru99.com/xpath-selenium.html

ya no funciona el link de playwrigth/Selectors al parecer ya para esta fecha es muy deprecated

Genial!

  //await page.getByRole('link', { name: 'Home' }).click();
  await page.click('a:has-text("Home")');

  //await page.getByRole('link', { name: 'Click' }).click();
  await page.click('text=Click');

  //await page.getByRole('button', { name: 'Button That Ignores DOM Click Event' }).click();
  await page.click('button:has-text("Button That Ignores DOM Click Event")');

Reto

Selectores con texto usando locator

await page.locator('a', { hasText: 'Resources' });

await page.locator('a:has-text("Resources")');

Para los que quieran practicar aprendiendo a sacar los xpath para los locators les dejo este archivo https://devhints.io/xpath

También funciona por este locator

await page.locator("//a[contains(text(),‘Resources’)]").click();

Otra manera de darle click a un elemento usando css selectors es la siguiente:
En este caso se esta dando click al link de Resources

await page.click("a[href='/resources']");

Creo que es mas legible y corta