Informaci贸n importante para resolver el reto

8/17

Lectura

Hola, lleg贸 el momento de enfrentar tu primer reto. Pero antes un 鈿狅笍 ANUNCIO IMPORTANTE 鈿狅笍

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 12

Preguntas 0

Ordenar por:

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

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 馃槵

test('playing with assertios', async ({ page }) => { await page.goto('https://automationexercise.com/category\_products'); await page.locator('a\[href\*="product\_details/2"]').first().click(); await page.locator('#.quantity').fill('3'); await page.getByRole('button', { name: 'Add to cart' }).click(); await expect(page.locator('.modal-content')).toBeEnabled(); await expect(page.locator('.modal-header')).toContainText('Added!'); await page.locator('.close-modal').click(); await expect(page.locator('.modal-content')).toBeHidden(); })
Aqui mi soluci贸n. Me apoyo en el model con Github Copilot import { test, expect } from '@playwright/test';import exp from 'constants'; test('playing with assertions', async ({ page }) => { 聽 聽 await page.goto('https://automationexercise.com/');聽 聽 await page.locator("a\[href='/product\_details/1']").click();聽 聽 await page.reload();聽 聽 await page.locator("a\[href='/product\_details/1']").click();聽 聽 await page.locator("#quantity").fill('3');聽 聽 await page.locator("button\[type='button']").click(); 聽 聽 // Esperar a que aparezca el modal聽 聽 await page.waitForSelector("//div\[@class='modal-content']"); 聽 聽 // Verificar que el texto "Added!" est谩 presente en el modal聽 聽 const modalTitle = await page.locator(".modal-title.w-100").textContent();聽 聽 expect(modalTitle).toBe("Added!"); 聽 聽 await page.locator(".btn.btn-success.close-modal.btn-block").click(); 聽 聽 // Verificar que el modal ya no es visible聽 聽 const modalVisible = await page.isVisible("//div\[@class='modal-content']");聽 聽 expect(modalVisible).toBe(false);});

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 = 鈥榓[href="/product_details/1"]鈥;
const inputProduct1 = 鈥#quantity鈥;

const titleAssertion = 鈥榟4.modal-title.w-100鈥;

test(鈥榩laying 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(鈥榖utton.btn.btn-default.cart鈥).click();

await expect(page.locator(titleAssertion)).toContainText(鈥楢dded!鈥);

隆Rock n鈥 Roll! 馃

Mi soluci贸n al reto:

https://github.com/doulovera/course-playwright鈥損latzi/

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.