Add new E2E shop test filtering products by price (#44516)
This commit is contained in:
Veljko V
GitHub
parent
3d3f6d64b8
commit
86f0ac9852
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
|
||||
Add new test shopper product filters
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
const { test, expect } = require( '@playwright/test' );
|
||||
const { closeWelcomeModal } = require( '../../utils/editor' );
|
||||
const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
|
||||
|
||||
const singleProductPrice1 = '10';
|
||||
const singleProductPrice2 = '50';
|
||||
const singleProductPrice3 = '200';
|
||||
|
||||
const simpleProductName = 'AAA Filter Products';
|
||||
|
||||
const productsFilteringPageTitle = `Products Filtering ${ Date.now() }`;
|
||||
const productsFilteringPageSlug = productsFilteringPageTitle
|
||||
.replace( / /gi, '-' )
|
||||
.toLowerCase();
|
||||
|
||||
let product1Id, product2Id, product3Id;
|
||||
|
||||
test.describe( 'Filter items in the shop by product price', () => {
|
||||
test.use( { storageState: process.env.ADMINSTATE } );
|
||||
|
||||
test.beforeAll( async ( { baseURL } ) => {
|
||||
const api = new wcApi( {
|
||||
url: baseURL,
|
||||
consumerKey: process.env.CONSUMER_KEY,
|
||||
consumerSecret: process.env.CONSUMER_SECRET,
|
||||
version: 'wc/v3',
|
||||
} );
|
||||
// add products
|
||||
await api
|
||||
.post( 'products', {
|
||||
name: simpleProductName + ' 1',
|
||||
type: 'simple',
|
||||
regular_price: singleProductPrice1,
|
||||
} )
|
||||
.then( ( response ) => {
|
||||
product1Id = response.data.id;
|
||||
} );
|
||||
await api
|
||||
.post( 'products', {
|
||||
name: simpleProductName + ' 2',
|
||||
type: 'simple',
|
||||
regular_price: singleProductPrice2,
|
||||
} )
|
||||
.then( ( response ) => {
|
||||
product2Id = response.data.id;
|
||||
} );
|
||||
await api
|
||||
.post( 'products', {
|
||||
name: simpleProductName + ' 3',
|
||||
type: 'simple',
|
||||
regular_price: singleProductPrice3,
|
||||
} )
|
||||
.then( ( response ) => {
|
||||
product3Id = response.data.id;
|
||||
} );
|
||||
} );
|
||||
|
||||
test.afterAll( async ( { baseURL } ) => {
|
||||
const api = new wcApi( {
|
||||
url: baseURL,
|
||||
consumerKey: process.env.CONSUMER_KEY,
|
||||
consumerSecret: process.env.CONSUMER_SECRET,
|
||||
version: 'wc/v3',
|
||||
} );
|
||||
await api.post( 'products/batch', {
|
||||
delete: [ product1Id, product2Id, product3Id ],
|
||||
} );
|
||||
} );
|
||||
|
||||
test( 'filter products by prices on the created page', async ( {
|
||||
page,
|
||||
} ) => {
|
||||
const sortingProductsDropdown = '.wc-block-sort-select__select';
|
||||
|
||||
// go to create a new page with filtering products by price
|
||||
await page.goto( 'wp-admin/post-new.php?post_type=page' );
|
||||
|
||||
await closeWelcomeModal( { page } );
|
||||
|
||||
await page
|
||||
.getByRole( 'textbox', { name: 'Add title' } )
|
||||
.fill( productsFilteringPageTitle );
|
||||
await page.getByRole( 'button', { name: 'Add default block' } ).click();
|
||||
await page
|
||||
.getByRole( 'document', {
|
||||
name: 'Empty block; start writing or type forward slash to choose a block',
|
||||
} )
|
||||
.fill( '/filter' );
|
||||
await page
|
||||
.getByRole( 'option' )
|
||||
.filter( { hasText: 'Filter by Price' } )
|
||||
.click();
|
||||
|
||||
await page.getByRole( 'textbox', { name: 'Add title' } ).click();
|
||||
await page.getByLabel( 'Add block' ).click();
|
||||
await page
|
||||
.getByPlaceholder( 'Search', { exact: true } )
|
||||
.fill( 'products' );
|
||||
await page
|
||||
.getByRole( 'option' )
|
||||
.filter( { hasText: 'All Products' } )
|
||||
.click();
|
||||
|
||||
await page
|
||||
.getByRole( 'button', { name: 'Publish', exact: true } )
|
||||
.click();
|
||||
await page
|
||||
.getByRole( 'region', { name: 'Editor publish' } )
|
||||
.getByRole( 'button', { name: 'Publish', exact: true } )
|
||||
.click();
|
||||
await expect(
|
||||
page.getByText( `${ productsFilteringPageTitle } is now live.` )
|
||||
).toBeVisible();
|
||||
|
||||
// go to the page to test filtering products by price
|
||||
await page.goto( productsFilteringPageSlug );
|
||||
await expect(
|
||||
page.getByRole( 'heading', { name: productsFilteringPageTitle } )
|
||||
).toBeVisible();
|
||||
|
||||
// The price filter input is initially enabled, but it becomes disabled
|
||||
// for the time it takes to fetch the data. To avoid setting the filter
|
||||
// value before the input is properly initialized, we wait for the input
|
||||
// to be disabled first. This is a safeguard to avoid flakiness which
|
||||
// should be addressed in the code
|
||||
await page
|
||||
.getByRole( 'textbox', {
|
||||
name: 'Filter products by maximum price',
|
||||
disabled: true,
|
||||
} )
|
||||
.waitFor( { timeout: 3000 } )
|
||||
.catch( () => {
|
||||
// Do not throw in case Playwright doesn't make it in time for the
|
||||
// initial (pre-request) render.
|
||||
} );
|
||||
|
||||
// filter by maximum $50 and verify the results
|
||||
await page
|
||||
.getByRole( 'textbox', { name: 'Filter products by maximum' } )
|
||||
.fill( '$50' );
|
||||
// click and sort products to allow changes to take effect
|
||||
await page.locator( sortingProductsDropdown ).click();
|
||||
await page
|
||||
.locator( sortingProductsDropdown )
|
||||
.selectOption( 'Popularity' );
|
||||
// to avoid flakiness
|
||||
await page
|
||||
.getByRole( 'textbox', {
|
||||
name: 'Filter products by maximum price',
|
||||
disabled: true,
|
||||
} )
|
||||
.waitFor( { timeout: 3000 } )
|
||||
.catch( () => {
|
||||
// Do not throw in case Playwright doesn't make it in time for the
|
||||
// initial (pre-request) render.
|
||||
} );
|
||||
|
||||
await expect(
|
||||
page
|
||||
.locator( 'h2.wc-block-grid__product-title' )
|
||||
.filter( { hasText: `${ simpleProductName } 1` } )
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page
|
||||
.locator( 'h2.wc-block-grid__product-title' )
|
||||
.filter( { hasText: `${ simpleProductName } 2` } )
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page
|
||||
.locator( 'h2.wc-block-grid__product-title' )
|
||||
.filter( { hasText: `${ simpleProductName } 3` } )
|
||||
).toBeHidden();
|
||||
|
||||
// filter by between $100 and $200 and verify the results
|
||||
await page
|
||||
.getByRole( 'textbox', { name: 'Filter products by maximum' } )
|
||||
.fill( '$200' );
|
||||
// click and sort products to allow changes to take effect
|
||||
await page.locator( sortingProductsDropdown ).click();
|
||||
await page
|
||||
.locator( sortingProductsDropdown )
|
||||
.selectOption( 'Default sorting' );
|
||||
// to avoid flakiness
|
||||
await page
|
||||
.getByRole( 'textbox', {
|
||||
name: 'Filter products by maximum price',
|
||||
disabled: true,
|
||||
} )
|
||||
.waitFor( { timeout: 3000 } )
|
||||
.catch( () => {
|
||||
// Do not throw in case Playwright doesn't make it in time for the
|
||||
// initial (pre-request) render.
|
||||
} );
|
||||
await page
|
||||
.getByRole( 'textbox', { name: 'Filter products by minimum' } )
|
||||
.fill( '$100' );
|
||||
// click and sort products to allow changes to take effect
|
||||
await page.locator( sortingProductsDropdown ).click();
|
||||
await page.locator( sortingProductsDropdown ).selectOption( 'Latest' );
|
||||
// to avoid flakiness
|
||||
await page
|
||||
.getByRole( 'textbox', {
|
||||
name: 'Filter products by maximum price',
|
||||
disabled: true,
|
||||
} )
|
||||
.waitFor( { timeout: 3000 } )
|
||||
.catch( () => {
|
||||
// Do not throw in case Playwright doesn't make it in time for the
|
||||
// initial (pre-request) render.
|
||||
} );
|
||||
|
||||
await expect(
|
||||
page
|
||||
.locator( 'h2.wc-block-grid__product-title' )
|
||||
.filter( { hasText: `${ simpleProductName } 1` } )
|
||||
).toBeHidden();
|
||||
await expect(
|
||||
page
|
||||
.locator( 'h2.wc-block-grid__product-title' )
|
||||
.filter( { hasText: `${ simpleProductName } 2` } )
|
||||
).toBeHidden();
|
||||
await expect(
|
||||
page
|
||||
.locator( 'h2.wc-block-grid__product-title' )
|
||||
.filter( { hasText: `${ simpleProductName } 3` } )
|
||||
).toBeVisible();
|
||||
} );
|
||||
} );
|
||||
Loading…
Reference in New Issue