Testing de Funcionalidades en Tiendas en Línea

Clase 8 de 17 • Curso de Automatización de Test con Playwright

Contenido del curso

Fundamentos

Estructura de un test

Reto #1

Debug de un test

Reto #2

Recomendaciones finales

17
Recomendaciones finales para pruebas efectivas con PlayWrite
03:30 min

Tomar examen

Hola, llegó el momento de enfrentar tu primer reto. Pero antes un ⚠️ ANUNCIO IMPORTANTE ⚠️

Desafortunadamente, el sitio web con el que resolveré el reto en la siguiente clase no está disponible por el momento. Pero no te preocupes, la consigna es “nunca pares de aprender”, así que te dejo esta web para que realices tus test: https://automationexercise.com/category_products

¿Qué diferencias vas a encontrar respecto a la forma yo resolveré el reto en la siguiente clase?

Al hacer hover sobre un artículo a comprar no te aparecerá "quick view", en vez de eso deberás dar click directamente en "view product".
Una vez ahí, la cantidad de productos a añadir se tendría que testear de forma distinta. Una pista es que observes el input para la cantidad de prendas en vez de 'button-plus' como yo lo hice.
Deberás omitir el paso de seleccionar el tamaño de la prenda, ya que la web que estarás probando no tiene esa opción.
Al verificar que el modal y el texto aparecen, en vez del texto "Success" simplemente usa el texto "Added!"

En resumen, podrás realizar 7 de los 9 test del reto, 2 de ellos con los ajustes mencionados arriba (❗):

Espero que superes este reto utilizando el ejemplo de la siguiente clase y todo lo que hemos aprendido hasta ahora. Déjame en los comentarios de la siguiente clase cómo quedó tu código y si lograste hacer testing al elemento para incrementar el número de prendas 😉.

Comentarios

Irving Juárez

student•

Hice un tutorial de como hacer este reto, para que comparen soluciones y aprendamos de las contribuciones de cada quien: SOLUCION AL RETO

Mauro Mascheroni

student•

Una solución o salida rápida que encontre para manejar la publicidad fue recargar la página con el comando page.reload(), esto nos lleva nuevamente a la pagina del home, por lo que se debe hacer click nuevamente al primer producto, por lo que esta vez nos lleva al producto, sin salir la publicidad.

Douglas Lovera

student•

Muy probablemente falle porque la página muestra publicidad, cuidado con eso 😬

Ivan Martinez Calcaño

student••

Solución del RETO 1 usando el site:

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

 test('add product to shopping cart', async({ page })=&gt;{

    //prevent ads from popping up in    https://automationexercise.com/
    await page.route('**/*', route =&gt; {
    const url = route.request().url();
    if (url.match(/google-vignette/)) {
      return route.abort();
    }
    route.continue();
    });

    //navigate to site
    await page.goto('https://automationexercise.com/');
  
    //validate title 
    await expect(page).toHaveTitle('Automation Exercise');
    //navigate to Products page
    const productsLink = page.locator('ul.nav.navbar-nav a:has-text("Products")');
    await expect(productsLink).toBeVisible();
    await productsLink.click();
    //select first product and go to product details
    const firstProduct = page.locator('ul.nav.nav-pills a:has-text("View Product")').first();
    await expect(firstProduct).toBeVisible();
    await firstProduct.click()
    //add 3 items of the selected product
    const quantityInput = page.locator('input#quantity');
    await quantityInput.fill('3');  
    //validate input element shows 3 items
    const inputValue = await quantityInput.inputValue();
    expect(inputValue).toBe('3');      
    //add items to cart
    const addItemsButton = page.locator('button.btn.btn-default.cart');
    await expect(addItemsButton).toBeVisible();
    await addItemsButton.click();
    //continue shopping
    await expect(page.locator('#cartModal')).toBeVisible();    
    const continueShoppingButton = page.locator('#cartModal .btn.btn-success.close-modal.btn-block');
    await expect(continueShoppingButton).toBeVisible()
    await continueShoppingButton.click();
 })

Elihu Garcia

student••

Buena aportación! los ads no me dejaban avanzar pero con tu ejemplo pude hacer mi propio ad blocker jaja solo que no me funcionó utilizando '/google-vignette/' sino '/googleads/' 👍

Jennyfer Tatiana Ramirez Ruiz

student•

in my case i created to files one is runner and other is pages but i created it vey bad 'cause i should to create one for one page and for diferentes fron-ents but here is my work

Aitor Reguillaga Otaño

student•

Aupa! He estado practicado con este reto y quiero compartiros mi propuesta. Se agradecen sugerencias.

Saludos!

const SELECTED_PRODUCT = "Rs. 700";
const NUMBER_OFF_UNITS = "10";
test(`I add ${SELECTED_PRODUCT} "${SELECTED_PRODUCT}" model polo and proced to check out`, async ({ page }) => {

    await page.goto('https://automationexercise.com/');
   await page.mouse.wheel(0, 500);
   await page.locator("a[href='/products']").click();

    // This code evited the google ads page    
    if( page.url() === "https://automationexercise.com/#google_vignette"){
        await page.frameLocator('iframe[name="aswift_5"]').getByRole('button', { name: 'Close ad' }).click();
    }

    // Navigate to Polo section and choose 'Rs. 700' polo
    await page.locator("a[href='/brand_products/Polo']").click();

    let selectedProductWrapper = page.locator(`div.product-image-wrapper:has-text(' ${SELECTED_PRODUCT}')`);
    await selectedProductWrapper.hover();
    await selectedProductWrapper.locator(".choose a").click();

    // ADD 10 polo to the card
    await page.locator("#quantity").fill(NUMBER_OFF_UNITS);
    await page.locator("button.cart").click();
    await expect(page.locator(".modal-content")).toBeVisible();
    await expect(page.locator(".modal-title.w-100")).toHaveText("Added!");

    // Confirm the card
    await page.locator(".modal-content a").click();
    await expect(page.locator("tr#product-8 td.cart_quantity button")).toHaveText(NUMBER_OFF_UNITS);

    // Check out
    await page.locator("a.check_out").click();
    await expect(page.locator(".modal-content")).toBeVisible();
    await page.locator(".modal-content a").click();

}

Ismael Ávila Ojeda

student••

Mi código:

import { test, expect } from '@playwright/test';test('test', async ({ page }) {  

//abrir en el navegador la tienda virtual/
await page.goto('https://automationexercise.com/');  await page.getByRole('button', { name: 'Consent' }).click();  

//Deslizar hasta ver los productos/  
await expect(page.getByRole('heading', { name: 'features items'})).toBeVisible();  

//Hacer click en "View Product" del primer producto/  
await page.getByRole('link', { name: 'View Product'}).first().click();  await page.locator('iframe[name="aswift_3"]').contentFrame().getByRole('button', { name: 'Close ad' }).click();  

//Añadir 3 productos al carrito/  
await page.locator('#quantity').fill('');  await page.locator('#quantity').fill('3');  

//Hacer click en añadir al carrito/  
await page.getByRole("button",{name: 'Add to cart'}).click();  

//Verificar que aparece el modal y el texto de "Added!"/  
await expect(page.getByRole('heading', {name: 'Added!'})).toBeVisible();  

//Hacer click en el botón "Continue Shopping"/  
await page.getByRole('button', { name: 'Continue Shopping' }).click();  

//Verificar que el modal ya no es visible/  
await expect(page.getByRole('heading', {name: 'Added!'})).not.toBeVisible();});

Diego Padovani

student•

mi codigo

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

test('Reto Platzi: Flujo completo de compra', async ({ page }) => {

// 1. Abre en el navegador la tienda virtual

await page.goto('https://automationexercise.com/');

await expect(page).toHaveTitle(/Automation Exercise/);

// 2. Desliza hasta ver los productos

// Usamos scrollIntoView para asegurar que el título de productos sea visible

const productTitle = page.getByRole('heading', { name: 'Features Items' });

await productTitle.scrollIntoViewIfNeeded();

await expect(productTitle).toBeVisible();

// 3. Haz click en "Ver más detalles" del primer producto

// Nota: En esta web el botón se llama "View Product"

await page.getByRole('link', { name: 'View Product' }).first().click();

// 4. Usa el botón (+) para añadir 3 productos al carrito

// En esta web se edita el número directamente en el input

const quantityInput = page.locator('#quantity');

await quantityInput.fill('3');

await expect(quantityInput).toHaveValue('3');

// 5. Elige el tamaño del producto

// Nota: Si el producto no tiene tamaño, este paso se puede omitir o

// usar un selector si existiera (ejemplo: page.getByLabel('Size').selectOption('M'))

// Para este ejercicio, validaremos que estamos en la página de detalle.

await expect(page).toHaveURL(/.*product_details/);

// 6. Haz click en Añadir al carrito

await page.getByRole('button', { name: 'Add to cart' }).click();

// 7. Verifica que el modal y el texto de "Success" aparece

// El modal en esta web tiene el ID #cartModal

const modal = page.locator('#cartModal');

await expect(modal).toBeVisible();

await expect(modal).toContainText('Added!');

await expect(modal.getByText('Your product has been added to cart.')).toBeVisible();

// 8. Haz click en el botón de "Continue Shopping"

await page.getByRole('button', { name: 'Continue Shopping' }).click();

// 9. Verifica que el modal ya no es visible

await expect(modal).toBeHidden();

});

Lennys Cantero

student•

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

test('test', async ({ page }) => {

//1- abre en el navegador la tienda virtual.

await page.goto('https://automationexercise.com/');

//desliza hasta ver los productos y hacer click

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

// ver mas detalles del producto 1

await page.locator('a[href="/product_details/1"]').click();

//seleccionar 3 productos al carrito

await page.locator('#quantity').fill('3');

// agregar al carrito

await page.locator('button.cart').click();

// validar que el modal aprezca

await expect(page.locator('#cartModal')).toBeVisible();

// continuar comprando

await page.locator('.btn.btn-success.close-modal.btn-block').click();

// verifiacar que el modal se haya cerrado

await expect(page.locator('#cartModal')).not.toBeVisible();

});

Cynthia Sotelo

student•

Mi solución:

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

test("Probar mi primera compra en la tienda", async ({ page }) => {

// 1. Entramos a la página principal

await page.goto("https://automationexercise.com/");

// 2. Bajamos un poco para ver los productos (scroll)

await page.mouse.wheel(0, 500);

const tituloProductos = page.getByRole("heading", { name: "FEATURES ITEMS" });

await expect(tituloProductos).toBeVisible();

// 3. Click en el primer producto que aparece para ver el detalle

await page.getByRole("link", { name: "View Product" }).first().click();

// 4. Cambiamos la cantidad a 3 productos

// Uso fill para escribir el número directamente en el cuadrito

await page.locator("#quantity").fill("3");

// 5. TODO: No encontré la opción de elegir tamaño en esta página

// 6. Click en el botón de añadir al carrito

await page.getByRole("button", { name: "Add to cart" }).click();

// 7. Verificamos que aparezca el cartel de "Added!" y el mensaje de éxito

await expect(page.getByText("Added!")).toBeVisible();

await expect(page.getByText("Your product has been added to cart.")).toBeVisible();

// 8. Click en "Continue Shopping" para cerrar el aviso

await page.getByRole("button", { name: "Continue Shopping" }).click();

// 9. Check final: el cartel ya no tiene que estar visible

await expect(page.getByText("Added!")).not.toBeVisible();

});

YEIMY ROCIO FUQUEN AVILA

student•

Darlinson Felipe Polania Camacho

student•

En la parte de añadir al poner el locator se repetia el elemento es por eso que toca darle click primero porq eu hay dos por esa barra qeu aparece al añadir al carro, pero bueno ya esta .

Leonardo Buezo

student•

Comparto mi solución al reto...

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

test.describe("navigation", () => {

test.beforeEach(async ({ page }) => {

// Go to the starting url before each test.

await page.goto("https://automationexercise.com/products");

await expect(page).toHaveURL("https://automationexercise.com/products");

});

test("main navigation", async ({ page }) => {

// Assertions use the expect API.

await expect(page.locator('.features_items .col-sm-4 .choose ul').first()).toBeVisible();

await page.locator('.features_items .col-sm-4 .choose ul').first().click();

await expect(page.url()).toContain('https://automationexercise.com/product\_details/1');

await expect(page.locator('#quantity')).toBeVisible();

await page.locator('#quantity').clear();

await page.locator('#quantity').fill('3');

await expect(page.locator('.cart')).toBeVisible;

await page.locator('.cart').click();

await expect(page.locator('.modal-content')).toBeVisible;

await expect(page.locator('.modal-title')).toContainText('Added!');

await expect(page.locator('.btn-block')).toBeVisible;

await page.locator('.btn-block').click();

await expect(page.locator('.modal-content')).not.toBeVisible();

});

Felipe Madrigal

student•

Mis tests:

test('test', async ({ page }) => {

await page.goto('https://automationexercise.com/products');

await page.locator('a[href="/product_details/1"]').click();

await page.locator('#quantity').fill('3');

await page.locator('button.cart').click();

await expect(page.locator('#cartModal')).toBeVisible();

await page.locator('.btn.btn-success.close-modal.btn-block').click();

await expect(page.locator('#cartModal')).not.toBeVisible();

});

fabian marentes

student•

estuvo genial, yo resolvi asi y solucione lo de los anuncios con un test.before para bloquear los anuncios de terceros. import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }) => {

// Bloquear anuncios de terceros

await page.route('**/*', (route) => {

const url = route.request().url();

const ads = [

'doubleclick.net',

'googlesyndication.com',

'googleadservices.com',

'googletagmanager.com',

];

if (ads.some(ad => url.includes(ad))) {

return route.abort();

}

route.continue();

});

// Ir a la página base

await page.goto('https://automationexercise.com/');

// Cerrar banner de la app si aparece

const banner = page.getByTestId('banner-close');

if (await banner.count() > 0 && await banner.isVisible()) {

await banner.click();

}

});

test('@regression reto producto', async ({ page }) => {

// 1. ir a navegador

await page.goto('https://automationexercise.com/');

// 2. desliza a un producto por el nombre (tiende a cambiar orden, mejor por algo especifico)

await page .locator('.product-image-wrapper', { hasText: 'Little Girls Mr. Panda Shirt' }).getByText('View Product').click();

await expect(page).toHaveURL(/product_details/);

// 3. ya en el detalle y verifica que este en el producto que es

await expect(page.getByText('Little Girls Mr. Panda Shirt')).toBeVisible();

await page.locator('#quantity').click();

// 4. añade 3 productos

await page.locator('#quantity').fill('3');

await page.getByRole('button', { name: ' Add to cart' }).click();

// 5. valida mesace de agregado

await expect(page.getByText(' Added! Your product has')).toBeVisible();

await page.getByRole('button', { name: 'Continue Shopping' }).click();

// 6. valida que el modal ya no este o este oculto

await expect(page.getByText(' Added! Your product has')).toBeHidden();

});

Juan Aguilera

student•

Listo reto completado, estuvo un poco complicado por todos los pop-up de anuncios, pero se aprendió a tratarlos en caso de que aparezcan.

Camilo Jiménez

student••

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

test("challenge 1", async ({ page }) =&gt; {
  //go to website
  await page.goto("https://automationexercise.com/category_products");

  //validate products class .features_items is visible
  await expect(page.locator(".features_items")).toBeVisible();

  //click on first product
  await page.locator("//li/a[text()='View Product']").first().click();

  //go back to previous page
  await page.goBack();

  //add 3 products to cart
  for (let i = 0; i &lt; 3; i++) {
    await page
      .locator("//div[contains(@class, 'productinfo')]/a[text()='Add to cart']")
      .nth(i)
      .click();
    await page.locator("//button[text()='Continue Shopping']").click();
  }

  //validate modal is not v
  await expect(page.locator(".modal-content")).not.toBeVisible();

  
});

Luis Antonio Del Rio Salguero

student•

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

test('test', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
});


test('test-3', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
});


test('test-2', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' View Product' }).first().click();
});


test('test-1', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' View Product' }).first().click();
  await page.locator('#quantity').fill('3');
  await page.getByRole('button', { name: ' Add to cart' }).click();
  await page.getByRole('button', { name: 'Continue Shopping' }).click();
});

test('test-0', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' View Product' }).first().click();
  await page.locator('#quantity').fill('3');
  await page.getByRole('button', { name: ' Add to cart' }).click();
  await page.getByRole('button', { name: 'Continue Shopping' }).click();
  await expect(page.locator('text=Continue Shopping')).toBeHidden();
});

Totalcoin Training

student•

import { test, expect, Page } from '@playwright/test';

async function pressKeyNTimes(page: Page, key: string, n: number) {
  for (let i = 0; i < n; i++) {
    await page.keyboard.press(key);
  }
}

test('reto1-Tienda', async ({ page }) => {
  await page.goto('https://automationexercise.com');
  await page.getByRole('link', { name: 'Products' }).click();
  await expect(page).toHaveURL('https://automationexercise.com/products');
  await expect(page.getByRole('textbox', { name: 'Search Product' })).toBeVisible();
  await page.locator('a[href="/product_details/1"]').click();
  await page.locator('#quantity').click();
  await pressKeyNTimes(page, 'ArrowUp', 2);
  await expect(page.locator('#quantity')).toHaveValue('3');
  await page.locator('.btn-default.cart').click();
  await expect(page.locator('.modal-title.w-100:has-text("Added!")')).toBeVisible();
  await page.getByRole('button', { name: 'Continue Shopping' }).click();
  await expect(page.locator('.modal-content')).not.toBeVisible();
});

Angelica Garcia

student••

Les comparto mi parte del reto 🙂

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

test("test e-commerce page", async ({ page }) =&gt; {
  // 1. Abre en el navegador la tienda virtual
  await page.goto("https://automationexercise.com/");

  // 2. Dezliza hasta ver los productos
  await page.mouse.wheel(0, 500);
  const featuresHeading = page.getByRole("heading", { name: "FEATURES ITEMS" });
  await expect(featuresHeading).toBeVisible();
  await featuresHeading.scrollIntoViewIfNeeded();

  // 3. Haz click en Ver "más detalles" del primer producto
  await page.getByRole("link", { name: "View Product" }).first().click();
  
  // 4. Usa el boton (+) para añadir 3 productos al carrito
  await page.fill("#quantity", "3");
  
  // 5. Elije el tamaño del producto TODO: No esta la opción de elegir tamaño
  
  // 6. Haz click en "Añadir al carrito"
  await page.getByRole("button", { name: "Add to cart" }).click();
  
  // 7. Verfica que el modal y el texto de "Success" apaarece
  await expect(page.getByText("Added!").first()).toBeVisible();
  await expect(
    page.getByText("Your product has been added to cart.")
  ).toBeVisible();
  
  // 8. Haz click en el boton de Continue Shopping
  await page.getByRole("button", { name: "Continue Shopping" }).click();
  
  // 9. Verifica que el modal es no es visible
  await expect(page.getByText("Added!").first()).not.toBeVisible();
});

Les comparto el gist por si tienen alguna recomendación para mejorar 🙌🏽

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

 test('add product to shopping cart', async({ page })=&gt;{

    //prevent ads from popping up in    https://automationexercise.com/
    await page.route('**/*', route =&gt; {
    const url = route.request().url();
    if (url.match(/google-vignette/)) {
      return route.abort();
    }
    route.continue();
    });

    //navigate to site
    await page.goto('https://automationexercise.com/');
  
    //validate title 
    await expect(page).toHaveTitle('Automation Exercise');
    //navigate to Products page
    const productsLink = page.locator('ul.nav.navbar-nav a:has-text("Products")');
    await expect(productsLink).toBeVisible();
    await productsLink.click();
    //select first product and go to product details
    const firstProduct = page.locator('ul.nav.nav-pills a:has-text("View Product")').first();
    await expect(firstProduct).toBeVisible();
    await firstProduct.click()
    //add 3 items of the selected product
    const quantityInput = page.locator('input#quantity');
    await quantityInput.fill('3');  
    //validate input element shows 3 items
    const inputValue = await quantityInput.inputValue();
    expect(inputValue).toBe('3');      
    //add items to cart
    const addItemsButton = page.locator('button.btn.btn-default.cart');
    await expect(addItemsButton).toBeVisible();
    await addItemsButton.click();
    //continue shopping
    await expect(page.locator('#cartModal')).toBeVisible();    
    const continueShoppingButton = page.locator('#cartModal .btn.btn-success.close-modal.btn-block');
    await expect(continueShoppingButton).toBeVisible()
    await continueShoppingButton.click();
 })

const SELECTED_PRODUCT = "Rs. 700";
const NUMBER_OFF_UNITS = "10";
test(`I add ${SELECTED_PRODUCT} "${SELECTED_PRODUCT}" model polo and proced to check out`, async ({ page }) => {

    await page.goto('https://automationexercise.com/');
   await page.mouse.wheel(0, 500);
   await page.locator("a[href='/products']").click();

    // This code evited the google ads page    
    if( page.url() === "https://automationexercise.com/#google_vignette"){
        await page.frameLocator('iframe[name="aswift_5"]').getByRole('button', { name: 'Close ad' }).click();
    }

    // Navigate to Polo section and choose 'Rs. 700' polo
    await page.locator("a[href='/brand_products/Polo']").click();

    let selectedProductWrapper = page.locator(`div.product-image-wrapper:has-text(' ${SELECTED_PRODUCT}')`);
    await selectedProductWrapper.hover();
    await selectedProductWrapper.locator(".choose a").click();

    // ADD 10 polo to the card
    await page.locator("#quantity").fill(NUMBER_OFF_UNITS);
    await page.locator("button.cart").click();
    await expect(page.locator(".modal-content")).toBeVisible();
    await expect(page.locator(".modal-title.w-100")).toHaveText("Added!");

    // Confirm the card
    await page.locator(".modal-content a").click();
    await expect(page.locator("tr#product-8 td.cart_quantity button")).toHaveText(NUMBER_OFF_UNITS);

    // Check out
    await page.locator("a.check_out").click();
    await expect(page.locator(".modal-content")).toBeVisible();
    await page.locator(".modal-content a").click();

}

import { test, expect } from '@playwright/test';test('test', async ({ page }) {  

//abrir en el navegador la tienda virtual/
await page.goto('https://automationexercise.com/');  await page.getByRole('button', { name: 'Consent' }).click();  

//Deslizar hasta ver los productos/  
await expect(page.getByRole('heading', { name: 'features items'})).toBeVisible();  

//Hacer click en "View Product" del primer producto/  
await page.getByRole('link', { name: 'View Product'}).first().click();  await page.locator('iframe[name="aswift_3"]').contentFrame().getByRole('button', { name: 'Close ad' }).click();  

//Añadir 3 productos al carrito/  
await page.locator('#quantity').fill('');  await page.locator('#quantity').fill('3');  

//Hacer click en añadir al carrito/  
await page.getByRole("button",{name: 'Add to cart'}).click();  

//Verificar que aparece el modal y el texto de "Added!"/  
await expect(page.getByRole('heading', {name: 'Added!'})).toBeVisible();  

//Hacer click en el botón "Continue Shopping"/  
await page.getByRole('button', { name: 'Continue Shopping' }).click();  

//Verificar que el modal ya no es visible/  
await expect(page.getByRole('heading', {name: 'Added!'})).not.toBeVisible();});

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

test("challenge 1", async ({ page }) =&gt; {
  //go to website
  await page.goto("https://automationexercise.com/category_products");

  //validate products class .features_items is visible
  await expect(page.locator(".features_items")).toBeVisible();

  //click on first product
  await page.locator("//li/a[text()='View Product']").first().click();

  //go back to previous page
  await page.goBack();

  //add 3 products to cart
  for (let i = 0; i &lt; 3; i++) {
    await page
      .locator("//div[contains(@class, 'productinfo')]/a[text()='Add to cart']")
      .nth(i)
      .click();
    await page.locator("//button[text()='Continue Shopping']").click();
  }

  //validate modal is not v
  await expect(page.locator(".modal-content")).not.toBeVisible();

  
});

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

test('test', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
});


test('test-3', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
});


test('test-2', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' View Product' }).first().click();
});


test('test-1', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' View Product' }).first().click();
  await page.locator('#quantity').fill('3');
  await page.getByRole('button', { name: ' Add to cart' }).click();
  await page.getByRole('button', { name: 'Continue Shopping' }).click();
});

test('test-0', async ({ page }) => {
  await page.goto('https://automationexercise.com/');
  await page.getByRole('link', { name: ' Products' }).click();
  await page.getByRole('link', { name: ' Products' }).press('ArrowRight');
  await page.getByRole('link', { name: ' Products' }).press('ArrowDown');
  await page.getByRole('link', { name: ' View Product' }).first().click();
  await page.locator('#quantity').fill('3');
  await page.getByRole('button', { name: ' Add to cart' }).click();
  await page.getByRole('button', { name: 'Continue Shopping' }).click();
  await expect(page.locator('text=Continue Shopping')).toBeHidden();
});

import { test, expect, Page } from '@playwright/test';

async function pressKeyNTimes(page: Page, key: string, n: number) {
  for (let i = 0; i < n; i++) {
    await page.keyboard.press(key);
  }
}

test('reto1-Tienda', async ({ page }) => {
  await page.goto('https://automationexercise.com');
  await page.getByRole('link', { name: 'Products' }).click();
  await expect(page).toHaveURL('https://automationexercise.com/products');
  await expect(page.getByRole('textbox', { name: 'Search Product' })).toBeVisible();
  await page.locator('a[href="/product_details/1"]').click();
  await page.locator('#quantity').click();
  await pressKeyNTimes(page, 'ArrowUp', 2);
  await expect(page.locator('#quantity')).toHaveValue('3');
  await page.locator('.btn-default.cart').click();
  await expect(page.locator('.modal-title.w-100:has-text("Added!")')).toBeVisible();
  await page.getByRole('button', { name: 'Continue Shopping' }).click();
  await expect(page.locator('.modal-content')).not.toBeVisible();
});

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

test("test e-commerce page", async ({ page }) =&gt; {
  // 1. Abre en el navegador la tienda virtual
  await page.goto("https://automationexercise.com/");

  // 2. Dezliza hasta ver los productos
  await page.mouse.wheel(0, 500);
  const featuresHeading = page.getByRole("heading", { name: "FEATURES ITEMS" });
  await expect(featuresHeading).toBeVisible();
  await featuresHeading.scrollIntoViewIfNeeded();

  // 3. Haz click en Ver "más detalles" del primer producto
  await page.getByRole("link", { name: "View Product" }).first().click();
  
  // 4. Usa el boton (+) para añadir 3 productos al carrito
  await page.fill("#quantity", "3");
  
  // 5. Elije el tamaño del producto TODO: No esta la opción de elegir tamaño
  
  // 6. Haz click en "Añadir al carrito"
  await page.getByRole("button", { name: "Add to cart" }).click();
  
  // 7. Verfica que el modal y el texto de "Success" apaarece
  await expect(page.getByText("Added!").first()).toBeVisible();
  await expect(
    page.getByText("Your product has been added to cart.")
  ).toBeVisible();
  
  // 8. Haz click en el boton de Continue Shopping
  await page.getByRole("button", { name: "Continue Shopping" }).click();
  
  // 9. Verifica que el modal es no es visible
  await expect(page.getByText("Added!").first()).not.toBeVisible();
});

Testing de Funcionalidades en Tiendas en Línea

Fundamentos

Automatización de Pruebas con Playwright: Curso Completo

Instalación de Playwright en Visual Studio Code

Creación de Tests Automatizados con Playwright en Visual Studio Code

Ejecución de Tests con Playwright: Métodos y Configuración

Estructura de un test

Locators y Selectors en Playwright: Uso y Corrección de Errores

Uso de Selectores en Tests de UI con Playwright

Assertions y Validaciones en Tests con Visual Studio Code

Reto #1