No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Selectores

5/17
Recursos

Aportes 15

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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();
});

Excelente informacion y muy buena manera de explicar de la profe
Lupe, gracias por este curso <3
En los posible se recomienda utilizar selectores que no tiendan a cambiar de forma din谩mica y que siempre sean 煤nicos como un id o una clase. Utilizar una etiqueta o un texto no podria ser la forma m谩s recomendable. Sin embargo, depender谩 siempre de las necesidades de la p谩gina y su estructura como indica la profesora.

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

<h5>Opci贸n 1</h5>
await page.locator('a', { hasText: 'Resources' });
<h5>Opci贸n 2</h5>
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(),鈥楻esources鈥)]").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