Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate merchant local-pickup e2e tests to Playwright (#43057) 

* Playwright migrated test file bootstrap and first test for local pickup

* Added page reload to force a new render

* Updated test description

* WIP: figuring out the fake input checkbox

* WIP: figuring out flaky state of local pickup enabled

* Fix flakey enable/disable local pickup

* Migrated remaining local pickup tests to Playwright

* Removed deprecated E2E

* Added changelog

* Corrected linting errors

* Fixed playwright/no-element-handle lint error

* Replace CSS IDs and classes with recommended built in locators

* Remove obsolete function calls

---------

Co-authored-by: Niels Lange <info@nielslange.de>
This commit is contained in:
Paulo Arromba 2024-01-11 14:25:12 +00:00 committed by GitHub
parent 67fb8d7511
commit 99e825df1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 334 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -77,6 +77,7 @@ nbproject/private/
# E2E and API Test Results
test-results
.auth/
# Admin Feature config
plugins/woocommerce/includes/react-admin/feature-config.php

293
plugins/woocommerce-blocks/tests/e2e-jest/specs/merchant/local-pickup.test.ts
View File

@ -1,293 +0,0 @@
/**
* External dependencies
*/
import { switchUserToAdmin, visitAdminPage } from '@wordpress/e2e-test-utils';
import { findLabelWithText } from '@woocommerce/blocks-test-utils';
import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api';
import { default as axios } from 'axios';
/**
* Internal dependencies
*/
import { merchant } from '../../../utils';
const setDefaults = async () => {
await merchant.enableLocalPickup();
await merchant.removeCostForLocalPickup();
};
const clearLocations = async () => {
const editButtons = await page.$$(
'.pickup-locations tbody tr .button-link-edit'
);
for ( const button of editButtons ) {
await button.click();
await expect( page ).toMatchElement( '.components-modal__content' );
await expect( page ).toClick( '.components-modal__content button', {
text: 'Delete location',
} );
await expect( page ).not.toMatchElement( '.components-modal__content' );
}
};
/**
* Sets the WC Cart and Checkout page IDs to the IDs of the pages with the given slugs.
*/
const setCartCheckoutPages = async ( {
cartSlug,
checkoutSlug,
}: {
cartSlug: string;
checkoutSlug: string;
} ) => {
const WPAPI = `${ process.env.WORDPRESS_BASE_URL }/wp-json/wp/v2/pages`;
const response = await axios.get( `${ WPAPI }?per_page=100` );
const pages = response.data;
const cartBlock = pages.find( ( page ) => page.slug === cartSlug );
const checkoutBlock = pages.find( ( page ) => page.slug === checkoutSlug );
const WooCommerce = new WooCommerceRestApi( {
url: `${ process.env.WORDPRESS_BASE_URL }/`,
consumerKey: 'consumer_key', // Your consumer key
consumerSecret: 'consumer_secret', // Your consumer secret
version: 'wc/v3',
axiosConfig: {
auth: {
username: process.env.WORDPRESS_LOGIN,
password: process.env.WORDPRESS_PASSWORD,
},
},
} );
const fixture = [
{
id: 'woocommerce_cart_page_id',
value: cartBlock.id.toString() || '',
},
{
id: 'woocommerce_checkout_page_id',
value: checkoutBlock.id.toString() || '',
},
];
await WooCommerce.post( 'settings/advanced/batch', {
update: fixture,
} );
};
describe( `Local Pickup Settings`, () => {
beforeAll( async () => {
await switchUserToAdmin();
await merchant.goToLocalPickupSettingsPage();
await setDefaults();
await clearLocations();
await merchant.saveLocalPickupSettingsPageWithRefresh();
} );
afterAll( async () => {
await switchUserToAdmin();
await merchant.goToLocalPickupSettingsPage();
await setDefaults();
await clearLocations();
await merchant.saveLocalPickupSettingsPageWithRefresh();
} );
beforeEach( async () => {
await switchUserToAdmin();
await merchant.goToLocalPickupSettingsPage();
} );
it( 'renders without crashing', async () => {
await expect( page ).toMatchElement( '#local-pickup-settings' );
} );
describe( 'Core Settings', () => {
afterAll( async () => {
await setCartCheckoutPages( {
cartSlug: 'cart-block',
checkoutSlug: 'checkout-block',
} );
} );
it( 'shows the correct shipping options depending on whether Local Pickup is enabled', async () => {
await merchant.disableLocalPickup();
await visitAdminPage(
'admin.php',
'page=wc-settings&tab=shipping&section=options'
);
const hideShippingLabel = await page.$x(
'//label[contains(., "Hide shipping costs until an address is entered")]'
);
await expect( hideShippingLabel ).toHaveLength( 1 );
await merchant.enableLocalPickup();
await visitAdminPage(
'admin.php',
'page=wc-settings&tab=shipping&section=options'
);
const modifiedHideShippingLabel = await page.$x(
'//label[contains(., "Hide shipping costs until an address is entered (Not available when using WooCommerce Blocks Local Pickup)")]'
);
await expect( modifiedHideShippingLabel ).toHaveLength( 1 );
} );
} );
describe( 'Global Settings', () => {
it( 'allows toggling of enabled on', async () => {
const initialChecked = await page.$eval(
'input[name="local_pickup_enabled"]',
( el ) => ( el as HTMLInputElement ).checked
);
const toggleLabel = await findLabelWithText(
'Enable local pickup'
);
await toggleLabel.click();
await merchant.saveLocalPickupSettingsPageWithRefresh();
expect(
await page.$eval(
'input[name="local_pickup_enabled"]',
( el ) => ( el as HTMLInputElement ).checked
)
).not.toBe( initialChecked );
} );
it( 'allows the title to be changed', async () => {
await expect( page ).toFill(
'input[name="local_pickup_title"]',
'Local Pickup Test'
);
await merchant.saveLocalPickupSettingsPageWithRefresh();
expect(
await page.$eval(
'input[name="local_pickup_title"]',
( el ) => el.value
)
).toBe( 'Local Pickup Test' );
} );
it( 'add price field toggles settings', async () => {
const selector = `input[name="local_pickup_cost"]`; // Cost field.
const toggleLabel = await findLabelWithText(
'Add a price for customers who choose local pickup'
);
await expect( toggleLabel ).toToggleElement( selector );
} );
it( 'cost and tax status can be set', async () => {
const toggleLabel = await findLabelWithText(
'Add a price for customers who choose local pickup'
);
const initialChecked = await page.$eval(
'#inspector-checkbox-control-1',
( el ) => ( el as HTMLInputElement ).checked
);
if ( ! initialChecked ) {
await toggleLabel.click();
}
await expect( page ).toFill(
'input[name="local_pickup_cost"]',
'20'
);
await page.select(
'select[name="local_pickup_tax_status"]',
'none'
);
await merchant.saveLocalPickupSettingsPageWithRefresh();
const refreshChecked = await page.$eval(
'#inspector-checkbox-control-1',
( el ) => ( el as HTMLInputElement ).checked
);
const costValue = await page.$eval(
'input[name="local_pickup_cost"]',
( el ) => el.value
);
const taxValue = await page.$eval(
'select[name="local_pickup_tax_status"]',
( el ) => el.value
);
expect( refreshChecked ).toBe( true );
expect( costValue ).toBe( '20' );
expect( taxValue ).toBe( 'none' );
} );
} );
describe( 'Location Settings', () => {
it( 'can add a new location', async () => {
await expect( page ).toClick( 'button', {
text: 'Add pickup location',
} );
await expect( page ).toMatchElement( '.components-modal__content' );
await expect( page ).toFill(
'.components-modal__content input[name="location_name"]',
'New Location Name'
);
await expect( page ).toFill(
'.components-modal__content input[name="location_address"]',
'New Address 123'
);
await expect( page ).toFill(
'.components-modal__content input[name="location_city"]',
'New City'
);
// We merged the Country and State fields into the same field in the local pickup modal.
await page.select(
'.components-modal__content select[name="location_country_state"]',
'United Kingdom (UK)'
);
await expect( page ).toFill(
'.components-modal__content input[name="location_postcode"]',
'N3W 123'
);
await expect( page ).toFill(
'.components-modal__content input[name="pickup_details"]',
'These are the pickup details for the new location.'
);
await expect( page ).toClick( '.components-modal__content button', {
text: 'Done',
} );
await merchant.saveLocalPickupSettingsPageWithRefresh();
await expect( page ).toMatchElement(
'.pickup-locations tbody tr td',
{
text: 'New Location Name',
}
);
} );
it( 'can edit a location', async () => {
await expect( page ).toClick( '.pickup-locations button', {
text: 'Edit',
} );
await expect( page ).toMatchElement( '.components-modal__content' );
await expect( page ).toClick( '.components-modal__content button', {
text: 'Done',
} );
} );
it( 'can delete a location', async () => {
await expect( page ).toClick( '.pickup-locations button', {
text: 'Edit',
} );
await expect( page ).toMatchElement( '.components-modal__content' );
await expect( page ).toClick( '.components-modal__content button', {
text: 'Delete location',
} );
await merchant.saveLocalPickupSettingsPageWithRefresh();
await expect( page ).not.toMatchElement(
'.pickup-locations tbody tr td',
{
text: 'New Location Name',
}
);
} );
} );
} );

181
plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.spec.ts Normal file
View File

@ -0,0 +1,181 @@
/**
* External dependencies
*/
import { test, expect } from '@woocommerce/e2e-playwright-utils';
/**
* Internal dependencies
*/
import { utilsLocalPickup as utils } from './utils.local-pickup';
test.describe( 'Merchant → Local Pickup Settings', () => {
test.beforeEach( async ( { admin, page } ) => {
await utils.openLocalPickupSettings( { admin } );
await utils.clearLocations( admin, page );
await utils.removeCostForLocalPickup( { page } );
await utils.enableLocalPickup( { page } );
} );
test( 'user can toggle the enabled state', async ( { page } ) => {
await expect( page.getByLabel( 'Enable local pickup' ) ).toBeChecked();
await utils.disableLocalPickup( { page } );
await expect(
page.getByLabel( 'Enable local pickup' )
).not.toBeChecked();
} );
test( 'user can change the title', async ( { page } ) => {
await page
.getByPlaceholder( 'Local Pickup' )
.fill( 'Local Pickup Test #1' );
await utils.savelocalPickupSettings( { page } );
await expect( page.getByPlaceholder( 'Local Pickup' ) ).toHaveValue(
'Local Pickup Test #1'
);
await page
.getByPlaceholder( 'Local Pickup' )
.fill( 'Local Pickup Test #2' );
await utils.savelocalPickupSettings( { page } );
await expect( page.getByPlaceholder( 'Local Pickup' ) ).toHaveValue(
'Local Pickup Test #2'
);
} );
test( 'user can toggle the price field state', async ( { page } ) => {
await utils.enableLocalPickupCosts( { page } );
await expect(
page.getByLabel(
'Add a price for customers who choose local pickup'
)
).toBeChecked();
await utils.disableLocalPickupCosts( { page } );
await expect(
page.getByLabel(
'Add a price for customers who choose local pickup'
)
).not.toBeChecked();
} );
test( 'user can edit costs and tax status', async ( { page } ) => {
await utils.enableLocalPickupCosts( { page } );
await expect(
page.getByLabel(
'Add a price for customers who choose local pickup'
)
).toBeChecked();
await page.getByPlaceholder( 'Free' ).fill( '20' );
await page.getByLabel( 'Taxes' ).selectOption( 'none' );
await utils.savelocalPickupSettings( { page } );
await expect( page.getByPlaceholder( 'Free' ) ).toHaveValue( '20' );
await expect( page.getByLabel( 'Taxes' ) ).toHaveValue( 'none' );
await page.getByPlaceholder( 'Free' ).fill( '' );
await page.getByLabel( 'Taxes' ).selectOption( 'taxable' );
await utils.savelocalPickupSettings( { page } );
await expect( page.getByPlaceholder( 'Free' ) ).toHaveValue( '' );
await expect( page.getByLabel( 'Taxes' ) ).toHaveValue( 'taxable' );
} );
test( 'user can add a new location', async ( { page } ) => {
await utils.addPickupLocation( {
page,
location: {
name: 'Automattic, Inc.',
address: '60 29th Street, Suite 343',
city: 'San Francisco',
postcode: '94110',
state: 'US:CA',
details: 'American entity',
},
} );
await expect(
page.getByRole( 'cell', {
name: 'Automattic, Inc.60 29th Street, Suite 343, San Francisco, California, 94110, United States (US)',
} )
).toBeVisible();
} );
test( 'user can edit a location', async ( { page } ) => {
await utils.addPickupLocation( {
page,
location: {
name: 'Automattic, Inc.',
address: '60 29th Street, Suite 343',
city: 'San Francisco',
postcode: '94110',
state: 'US:CA',
details: 'American entity',
},
} );
await expect(
page.getByRole( 'cell', {
name: 'Automattic, Inc.60 29th Street, Suite 343, San Francisco, California, 94110, United States (US)',
} )
).toBeVisible();
await utils.editPickupLocation( {
page,
location: {
name: 'Ministry of Automattic Limited',
address: '100 New Bridge Street',
city: 'London',
postcode: 'EC4V 6JA',
state: 'GB',
details: 'British entity',
},
} );
await expect(
page.getByRole( 'cell', {
name: 'Ministry of Automattic Limited100 New Bridge Street, London, EC4V 6JA, United Kingdom (UK)',
} )
).toBeVisible();
} );
test( 'user can delete a location', async ( { page } ) => {
await utils.addPickupLocation( {
page,
location: {
name: 'Ausomattic Pty Ltd',
address:
'c/o Baker And Mckenzie Level 19 Cbw, 181 William Street',
city: 'Melbourne',
postcode: '300',
state: 'AU:VIC',
details: 'Australian entity',
},
} );
await expect(
page.getByRole( 'cell', {
name: 'Ausomattic Pty Ltdc/o Baker And Mckenzie Level 19 Cbw, 181 William Street, Melbourne, Victoria, 300, Australia',
} )
).toBeVisible();
await utils.deletePickupLocation( { page } );
await expect(
page.getByRole( 'cell', {
name: 'When you add a pickup location, it will appear here.',
} )
).toBeVisible();
} );
} );

148
plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/utils.local-pickup.ts Normal file
View File

@ -0,0 +1,148 @@
/**
* External dependencies
*/
import { expect } from '@woocommerce/e2e-playwright-utils';
import { Page } from '@playwright/test';
import { Admin } from '@wordpress/e2e-test-utils-playwright';
type Location = {
name: string;
address: string;
city: string;
postcode: string;
state: string;
details: string;
};
export const utilsLocalPickup = {
openLocalPickupSettings: async ( { admin }: { admin: Admin } ) => {
await admin.visitAdminPage(
'admin.php',
'page=wc-settings&tab=shipping&section=pickup_location'
);
},
savelocalPickupSettings: async ( { page }: { page: Page } ) => {
await page.getByRole( 'button', { name: 'Save changes' } ).click();
},
enableLocalPickup: async ( { page }: { page: Page } ) => {
await page.getByLabel( 'Enable local pickup' ).check();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
disableLocalPickup: async ( { page }: { page: Page } ) => {
await page.getByLabel( 'Enable local pickup' ).uncheck();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
enableLocalPickupCosts: async ( { page }: { page: Page } ) => {
await page
.getByLabel( 'Add a price for customers who choose local pickup' )
.check();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
disableLocalPickupCosts: async ( { page }: { page: Page } ) => {
await page
.getByLabel( 'Add a price for customers who choose local pickup' )
.uncheck();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
clearLocations: async ( admin: Admin, page: Page ) => {
await admin.visitAdminPage(
'admin.php',
'page=wc-settings&tab=shipping&section=pickup_location'
);
const editButtons = page.locator(
'.pickup-locations tbody tr .button-link-edit'
);
const buttonsCount = await editButtons.count();
for ( let i = 0; i < buttonsCount; i++ ) {
const button = editButtons.nth( i );
await button.click();
const deleteButton = page.locator(
'.components-modal__content button:text("Delete location")'
);
await deleteButton.click();
await expect(
page.locator( '.components-modal__content' )
).toHaveCount( 0 );
}
await page.waitForSelector(
'.pickup-locations tbody tr td:has-text("When you add a pickup location, it will appear here.")'
);
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
removeCostForLocalPickup: async ( { page }: { page: Page } ) => {
await page
.getByLabel( 'Add a price for customers who choose local pickup' )
.uncheck();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
addPickupLocation: async ( {
page,
location,
}: {
page: Page;
location: Location;
} ) => {
await page.getByText( 'Add pickup location' ).click();
await page.getByLabel( 'Location name' ).fill( location.name );
await page.getByPlaceholder( 'Address' ).fill( location.address );
await page.getByPlaceholder( 'City' ).fill( location.city );
await page
.getByPlaceholder( 'Postcode / ZIP' )
.fill( location.postcode );
await page
.getByLabel( 'Country / State' )
.selectOption( location.state );
await page.getByLabel( 'Pickup details' ).fill( location.details );
await page.getByRole( 'button', { name: 'Done' } ).click();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
editPickupLocation: async ( {
page,
location,
}: {
page: Page;
location: Location;
} ) => {
await page.getByRole( 'button', { name: 'Edit' } ).click();
await page.getByLabel( 'Location name' ).fill( location.name );
await page.getByPlaceholder( 'Address' ).fill( location.address );
await page.getByPlaceholder( 'City' ).fill( location.city );
await page
.getByPlaceholder( 'Postcode / ZIP' )
.fill( location.postcode );
await page
.getByLabel( 'Country / State' )
.selectOption( location.state );
await page.getByLabel( 'Pickup details' ).fill( location.details );
await page.getByRole( 'button', { name: 'Done' } ).click();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
deletePickupLocation: async ( { page }: { page: Page } ) => {
await page.getByRole( 'button', { name: 'Edit' } ).click();
await page.getByRole( 'button', { name: 'Delete location' } ).click();
await utilsLocalPickup.savelocalPickupSettings( { page } );
},
};

4
plugins/woocommerce/changelog/update-convert-merchant-localpickup-e2e-tests Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Migrated local pickup E2E tests to Playwright