El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem com treballar amb selectors a Playwright. Els selectors són una part fonamental de l'automatització de proves, ja que ens permeten identificar i interactuar amb elements dins d'una pàgina web. Aprendrem a utilitzar diferents tipus de selectors i veurem com Playwright facilita aquesta tasca.

Conceptes Clau

Selectors CSS: Els selectors CSS són una manera comuna d'identificar elements a la pàgina. Són flexibles i permeten seleccionar elements basant-se en etiquetes, classes, identificadors i més.
Selectors XPath: XPath és un llenguatge de consulta per seleccionar nodes d'un document XML. A Playwright, també es pot utilitzar per seleccionar elements HTML.
Selectors de Text: Playwright permet seleccionar elements basant-se en el text visible, cosa que pot ser molt útil per a elements com botons o enllaços.
Selectors de Rol: Aquests selectors utilitzen els rols d'accessibilitat dels elements, proporcionant una manera semàntica de seleccionar elements.
Selectors de Cadena: Permeten combinar múltiples selectors per identificar elements de manera més precisa.

Exemples Pràctics

Exemple 1: Utilitzant Selectors CSS

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Selecciona un element per classe
  const element = await page.$('.example-class');
  console.log(await element?.textContent());

  await browser.close();
})();

Explicació: En aquest exemple, utilitzem un selector CSS per seleccionar un element amb la classe example-class i imprimim el seu contingut de text.

Exemple 2: Utilitzant Selectors XPath

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Selecciona un element utilitzant XPath
  const element = await page.$('//h1');
  console.log(await element?.textContent());

  await browser.close();
})();

Explicació: Aquí utilitzem un selector XPath per seleccionar el primer element <h1> de la pàgina.

Exemple 3: Utilitzant Selectors de Text

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Selecciona un botó pel seu text
  const button = await page.$('text="Click Me"');
  await button?.click();

  await browser.close();
})();

Explicació: Aquest exemple mostra com seleccionar un botó basant-se en el seu text visible "Click Me" i fer-hi clic.

Exercicis Pràctics

Exercici 1: Seleccionant Elements per Classe

Objectiu: Escriu un script que seleccioni tots els elements amb la classe item i imprimeixi el seu text.

Solució:

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const elements = await page.$$('.item');
  for (const element of elements) {
    console.log(await element.textContent());
  }

  await browser.close();
})();

Exercici 2: Utilitzant Selectors de Rol

Objectiu: Selecciona un element amb el rol de button i fes-hi clic.

Solució:

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const button = await page.getByRole('button', { name: 'Submit' });
  await button.click();

  await browser.close();
})();

Resum

En aquesta secció, hem après a treballar amb diferents tipus de selectors a Playwright, incloent CSS, XPath, text i rols. Els selectors són essencials per interactuar amb els elements de la pàgina i automatitzar les proves de manera efectiva. Practicar amb aquests exemples i exercicis t'ajudarà a dominar l'ús de selectors en Playwright. En el següent tema, explorarem com gestionar múltiples pàgines i frames.

Treballant amb Selectors

Conceptes Clau

Exemples Pràctics

Exemple 1: Utilitzant Selectors CSS

Exemple 2: Utilitzant Selectors XPath

Exemple 3: Utilitzant Selectors de Text

Exercicis Pràctics

Exercici 1: Seleccionant Elements per Classe

Exercici 2: Utilitzant Selectors de Rol

Resum

Dramaturg amb TypeScript: De Principiant a Avançat

Mòdul 1: Introducció a Playwright i TypeScript

Mòdul 2: Començant amb Playwright

Mòdul 3: Fonaments de Playwright i TypeScript

Mòdul 4: Funcions Avançades de Playwright

Mòdul 5: Estratègies d'Automatització de Proves

Mòdul 6: Tècniques Avançades de TypeScript

Mòdul 7: Aplicacions Reals de Playwright

Mòdul 8: Conclusió del Curs i Propers Passos