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

HOME

En aquest tema, aprendrem com Playwright pot gestionar múltiples pàgines i frames dins d'una aplicació web. Aquesta funcionalitat és crucial quan treballem amb aplicacions complexes que utilitzen finestres emergents, pestanyes o iframes per mostrar contingut.

Conceptes Clau

Pàgines: En Playwright, una pàgina representa una pestanya del navegador. Pots obrir noves pàgines i interactuar amb elles de manera independent.
Frames: Un frame és una secció d'una pàgina que pot carregar contingut independentment. Els iframes són un exemple comú de frames.

Treballant amb Múltiples Pàgines

Obrir una Nova Pàgina

Per obrir una nova pàgina en Playwright, utilitzem el mètode newPage() del context del navegador. Aquí tens un exemple:

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  
  // Obrir la primera pàgina
  const page1 = await context.newPage();
  await page1.goto('https://example.com');
  
  // Obrir una segona pàgina
  const page2 = await context.newPage();
  await page2.goto('https://example.org');
  
  // Tanca el navegador
  await browser.close();
})();

Interactuar amb Pàgines

Cada pàgina es pot manipular de manera independent. Pots navegar, fer clic, escriure text, etc., en cada pàgina per separat.

Treballant amb Frames

Accedir a un Frame

Per accedir a un frame dins d'una pàgina, utilitzem el mètode frame() o frameLocator(). Aquí tens un exemple:

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  await page.goto('https://example.com/with-iframe');
  
  // Accedir a un frame per nom o URL
  const frame = page.frame({ url: /.*iframe-url.*/ });
  
  // Interactuar amb el contingut del frame
  if (frame) {
    await frame.click('button#submit');
  }
  
  await browser.close();
})();

Interactuar amb Frames

Un cop tens accés al frame, pots utilitzar les mateixes funcions que utilitzaries en una pàgina normal, com click(), fill(), etc.

Exercicis Pràctics

Exercici 1: Obrir i Interactuar amb Múltiples Pàgines

Crea un script que obri dues pàgines diferents.
Navega a https://example.com en la primera pàgina i a https://example.org en la segona.
Fes una captura de pantalla de cada pàgina i desa-les amb noms diferents.

Solució de l'Exercici 1

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  
  const page1 = await context.newPage();
  await page1.goto('https://example.com');
  await page1.screenshot({ path: 'example-com.png' });
  
  const page2 = await context.newPage();
  await page2.goto('https://example.org');
  await page2.screenshot({ path: 'example-org.png' });
  
  await browser.close();
})();

Exercici 2: Interactuar amb un Frame

Crea un script que accedeixi a un frame dins d'una pàgina.
Fes clic en un botó dins del frame.

Solució de l'Exercici 2

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  await page.goto('https://example.com/with-iframe');
  
  const frame = page.frame({ url: /.*iframe-url.*/ });
  
  if (frame) {
    await frame.click('button#submit');
  }
  
  await browser.close();
})();

Errors Comuns i Consells

Error: No es troba el frame: Assegura't que el selector del frame és correcte. Pots utilitzar el mètode frameLocator() per ajudar-te a trobar el frame.
Consell: Utilitza waitForSelector() dins del frame per assegurar-te que els elements estan carregats abans d'interactuar amb ells.

Conclusió

En aquesta secció, hem après a gestionar múltiples pàgines i frames amb Playwright. Aquestes habilitats són essencials per treballar amb aplicacions web complexes que utilitzen finestres emergents i iframes. En el següent tema, explorarem com interceptar xarxes i simular respostes per a proves més avançades.

Gestionant Múltiples Pàgines i Frames

Conceptes Clau

Treballant amb Múltiples Pàgines

Obrir una Nova Pàgina

Interactuar amb Pàgines

Treballant amb Frames

Accedir a un Frame

Interactuar amb Frames

Exercicis Pràctics

Exercici 1: Obrir i Interactuar amb Múltiples Pàgines

Solució de l'Exercici 1

Exercici 2: Interactuar amb un Frame

Solució de l'Exercici 2

Errors Comuns i Consells

Conclusió

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