Testing de Funcionalidades en Tiendas en Línea
Contenido del curso
Estructura de un test
Reto #1
Debug de un test
Reto #2
Recomendaciones finales
Testing de Funcionalidades en Tiendas en Línea
Testing de Funcionalidades en Tiendas en Línea
Contenido del curso
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?
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 😉.
Irving Juárez
Douglas Lovera
Mauro Mascheroni
Ivan Martinez Calcaño
Elihu Garcia
Jennyfer Tatiana Ramirez Ruiz
Aitor Reguillaga Otaño
Odabel Santos Álvarez
Jeferson Andrés Cruz Herrera
Michell gonzalez
Miguel Stiven Herrera Gomez
Ismael Ávila Ojeda
Diego Padovani
Lennys Cantero
Cynthia Sotelo
YEIMY ROCIO FUQUEN AVILA
Darlinson Felipe Polania Camacho
Leonardo Buezo
Felipe Madrigal
fabian marentes
Juan Aguilera
Hice un tutorial de como hacer este reto, para que comparen soluciones y aprendamos de las contribuciones de cada quien: SOLUCION AL RETO
Muy probablemente falle porque la página muestra publicidad, cuidado con eso 😬
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.
Solución del RETO 1 usando el site:
import { test, expect } from '@playwright/test'; test('add product to shopping cart', async({ page })=>{ //prevent ads from popping up in https://automationexercise.com/ await page.route('**/*', route => { 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(); })
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/' 👍
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
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(); }
import { test, expect } from '@playwright/test'; const url_testing = 'https://automationexercise.com'; const url_product_1 = 'https://automationexercise.com/product_details/1' test('Testing de Funcionalidades en Tiendas en Línea', async ({ page }) => { // 1. Abre en el navegador la tienda viertual await page.goto(url_testing); await expect(page).toHaveURL(url_testing); // 2. Haz clic en "Ver más detalles" del primer producto await expect(page.getByRole('link', { name: 'View Product' }).first()).toBeVisible(); await page.getByRole('link', { name: 'View Product' }).first().click(); // 3. Añadir tres productos al carrito await expect(page).toHaveURL(url_product_1); await expect(page.locator('#quantity')).toBeVisible(); await page.locator('#quantity').fill('3'); // await expect(page.locator('button.btn.btn-default.cart')).toBeVisible(); await expect(page.getByRole('button', { name: 'Add to cart' })).toBeVisible(); await page.getByRole('button', { name: 'Add to cart' }).click(); // 4. Verifica que el modal y el texto "Added!" aparece await expect(page.locator('#cartModal')).toBeVisible(); await expect(page.locator('#cartModal .modal-title')).toHaveText('Added!'); await expect(page.locator('#cartModal .modal-body p').first()).toHaveText('Your product has been added to cart.'); // 5. Haz clic en el botón "Continue Shopping" await expect(page.getByRole('button', { name: 'Continue Shopping' })).toBeVisible(); await page.getByRole('button', { name: 'Continue Shopping' }).click(); // 6. Verifica que el modal ya no es visible await expect(page.locator('#cartModal')).toBeHidden(); });
import { test, expect } from '@playwright/test'; test('Agregar producto', async ({ page }) => { await page.goto('https://automationexercise.com/'); 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 expect(page.getByText('ADDED!')).toBeVisible(); await page.getByRole('button', { name: 'Continue Shopping' }).click(); await expect(page.locator('div.modal-content')).not.toBeVisible(); });
Adjunto la solucion del reto
import { test, expect } from '@playwright/test'; test('first activity', async ({ page }) => { await page.goto('https://automationexercise.com/'); await page.locator('.features_items').hover(); await page.getByRole('link', { name: 'View Product' }).first().click(); await expect(page.locator('#quantity')).toBeVisible(); await page.locator('#quantity').fill('3'); await page.getByRole('button', { name: 'Add to cart' }).click(); await expect(page.locator('.modal-content')).toBeVisible(); await expect(page.getByRole('heading', { name: 'Added!' })).toHaveText('Added!'); await page.getByRole('button', { name: 'Continue Shopping' }).click(); await expect(page.locator('.modal-content')).not.toBeVisible(); });
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();});
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();
});
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();
});
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();
});
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 .
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();
});
});
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();
});
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();
});
Listo reto completado, estuvo un poco complicado por todos los pop-up de anuncios, pero se aprendió a tratarlos en caso de que aparezcan.