Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 12x 12x 12x 1x 1x 1x 1x 1x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 7x 8x 1x 1x 8x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | // @ts-check
const { expect } = require('@playwright/test');
const { BasePage } = require('./BasePage');
const { HeaderComponent } = require('./components/HeaderComponent');
const { environment } = require('../config/environment');
/**
* ProductsPage POM handles product searching, listing, detail views, and review submissions.
*/
class ProductsPage extends BasePage {
/**
* @param {import('@playwright/test').Page} page
*/
constructor(page) {
super(page);
this.header = new HeaderComponent(page);
// Products List Elements
this.allProductsTitle = page.locator('.features_items h2.title');
this.productsList = page.locator('.features_items .col-sm-4');
this.productWrappers = page.locator('.features_items .product-image-wrapper');
this.searchInput = page.locator('#search_product');
this.searchButton = page.locator('#submit_search');
this.searchedProductsTitle = page.locator('.features_items h2.title');
// Modal Confirmation Elements
this.cartModal = page.locator('.modal-content');
this.continueShoppingButton = page.locator('.modal-content').getByRole('button', { name: 'Continue Shopping' });
this.viewCartModalLink = page.locator('.modal-content').getByRole('link', { name: 'View Cart' });
// Product Detail Page Elements
this.productName = page.locator('.product-information h2');
this.productCategory = page.locator('.product-information p:has-text("Category:")');
this.productPrice = page.locator('.product-information span span');
this.productAvailability = page.locator('.product-information p:has-text("Availability:")');
this.productCondition = page.locator('.product-information p:has-text("Condition:")');
this.productBrand = page.locator('.product-information p:has-text("Brand:")');
this.quantityInput = page.locator('#quantity');
this.addToCartDetailButton = page.locator('button:has-text("Add to cart")');
// Review Form Locators
this.writeReviewHeading = page.locator('text=Write Your Review');
this.reviewNameInput = page.locator('#name');
this.reviewEmailInput = page.locator('#email');
this.reviewTextarea = page.locator('#review');
this.submitReviewButton = page.locator('#button-review');
this.reviewSuccessAlert = page.locator('text=Thank you for your review.');
}
/**
* Navigates directly to /products
*/
async navigate() {
await this.goto(environment.routes.products);
await this.verifyLoaded();
}
/**
* Verifies the products page loaded.
*/
async verifyLoaded() {
await expect(this.page).toHaveURL(new RegExp(`${environment.routes.products}$`));
await expect(this.allProductsTitle).toBeVisible();
await expect(this.allProductsTitle).toHaveText('All Products', { ignoreCase: true });
}
/**
* Verifies that the products list is displayed.
*/
async verifyProductsListVisible() {
await expect(this.productsList.first()).toBeVisible();
const count = await this.productsList.count();
expect(count).toBeGreaterThan(0);
}
/**
* Searches for a product resiliently and asserts results heading.
* @param {string} query
*/
async searchProduct(query) {
await this.searchInput.fill(query);
await this.searchButton.scrollIntoViewIfNeeded();
await this.searchButton.click();
try {
await this.page.waitForURL(/\/products\?search=/, { timeout: 3500 });
} catch {
await this.page.evaluate((q) => {
window.location.href = '/products?search=' + encodeURIComponent(q);
}, query);
await this.page.waitForURL(/\/products\?search=/, { timeout: 10000 });
}
const searchedHeading = this.page.getByRole('heading', { name: 'Searched Products', exact: false });
await expect(searchedHeading).toBeVisible({ timeout: 10000 });
return this.page.locator('.features_items .product-image-wrapper');
}
/**
* Clicks 'View Product' for a specific product by ID or the first product.
* @param {string | number} [productId]
*/
async clickViewProduct(productId) {
if (productId) {
await this.page.locator(`a[href="/product_details/${productId}"]`).first().click();
} else {
await this.page.locator('.features_items a[href^="/product_details/"]').first().click();
}
}
/**
* Clicks 'View Product' for the first product in the list.
*/
async clickFirstProductDetail() {
await this.clickViewProduct();
}
/**
* Verifies product detail information fields are visible.
*/
async verifyProductDetailsVisible() {
await expect(this.productName).toBeVisible();
await expect(this.productCategory).toBeVisible();
await expect(this.productPrice).toBeVisible();
await expect(this.productAvailability).toBeVisible();
await expect(this.productCondition).toBeVisible();
await expect(this.productBrand).toBeVisible();
}
/**
* Adds a product to cart by ID via card overlay.
* @param {string | number} productId
* @param {'continue' | 'view-cart'} [action='continue']
*/
async addProductById(productId, action = 'continue') {
const product = this.page.locator('.product-image-wrapper').filter({
has: this.page.locator(`.add-to-cart[data-product-id="${productId}"]`),
}).first();
await product.scrollIntoViewIfNeeded();
await product.hover();
await product.locator(`.product-overlay .add-to-cart[data-product-id="${productId}"]`).click();
await expect(this.cartModal).toBeVisible();
if (action === 'view-cart') {
await this.viewCartModalLink.click();
} else {
await this.continueShoppingButton.click();
}
}
/**
* Sets quantity in product detail page.
* @param {string | number} quantity
*/
async setQuantity(quantity) {
await this.quantityInput.fill(String(quantity));
}
/**
* Adds product to cart from product detail page.
* @param {'continue' | 'view-cart'} [action='continue']
*/
async addToCartFromDetail(action = 'continue') {
await this.addToCartDetailButton.scrollIntoViewIfNeeded();
await expect.poll(async () => {
if (await this.cartModal.isVisible()) return true;
await this.addToCartDetailButton.click();
return false;
}, { timeout: 15000, intervals: [500, 1000, 1500] }).toBeTruthy();
if (action === 'view-cart') {
await this.viewCartModalLink.click();
} else {
await this.continueShoppingButton.click();
}
}
/**
* Submits a product review.
* @param {{ name: string, email: string, review: string }} reviewData
*/
async submitReview({ name, email, review }) {
await expect(this.writeReviewHeading).toBeVisible();
await this.reviewNameInput.fill(name);
await this.reviewEmailInput.fill(email);
await this.reviewTextarea.fill(review);
await this.submitReviewButton.click();
await expect(this.reviewSuccessAlert).toBeVisible();
}
}
module.exports = { ProductsPage };
|