Testing de Funcionalidades en Tiendas en Línea

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

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.

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

}

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

Código del reto:

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

test("test", async ({ page }) => {
  await page.goto("https://automationexercise.com/");
  page
    .locator(".features_items")
    .locator(".product-image-wrapper")
    .filter({
      has: page.locator(".single-products > .productinfo > p", {
        hasText: "Blue Top",
      }),
    })
    .locator(".choose > .nav > li > a")
    .click();
  await page.mouse.click(0, 0);
  await page.locator("#quantity").fill("3");
  await page.getByRole("button", { name: " Add to cart" }).click();
  await expect(page.getByText("Added!")).toBeVisible();
  await page.getByRole("button", { name: "Continue Shopping" }).click();
});

Hola!

Quiero compartirles mi propuesta.

  //GO TO THE PAGE
  await page.goto('https://automationexercise.com/category_products');

  //CLICK ON THE FIRST ELEMENT
  await page.locator('div.choose>ul>li>a').first().click();

  //ADD 3 PRODUCTS INTO THE SHOPPING CAR
  await page.locator('#quantity').fill('3');

  //CLICK ON THE BUTTON ADD TO CART
  await page.getByRole('button', { name: 'Add to cart' }).click();

  //VERIFY THE MODAL EXISTS
  await expect(page.locator('.modal-content')).toBeEnabled();

  //VERIFY THE TEXT EXISTS
  await expect(page.locator('.modal-header')).toContainText('Added!');

  //CLICK ON THE CONTINUE SHOPPING BUTTON
  await page.locator('.close-modal').click();

  //VERIFY THE MODAL IS NOT EXIST
  await expect(page.locator('.modal-content')).toBeHidden();

Saludos.

const viewProduct = ‘a[href="/product_details/1"]’;
const inputProduct1 = ‘#quantity’;

const titleAssertion = ‘h4.modal-title.w-100’;

test(‘playing with assertions’, async ({ page }) => {

await page.goto(‘https://automationexercise.com/category_products’);

await page.locator(viewProduct).click();
page.reload();

await page.locator(viewProduct).click();

await expect(page.locator(inputProduct1)).toBeVisible();
//await page.locator(inputProduct1).clear();
await page.locator(inputProduct1).fill(‘5’);

await page.locator(‘button.btn.btn-default.cart’).click();

await expect(page.locator(titleAssertion)).toContainText(‘Added!’);

¡Rock n’ Roll! 🤙

Mi solución al reto:

https://github.com/doulovera/course-playwright–platzi/

Reconozco que tuve que usar codegen para ver cómo podía cerrar el modal de Google Ads porque no pude hacerlo desde su id. Está bonito Playwright 😁

Adjunto mi solución al reto, quizás un poco más sencilla porque procuro utilizar las herramientas que me posee Playwright en su ultimo reléase. por ejemplo para hacer el hover y localizar un elemento entre elementos similares.
Espero les sea útil.