Skip to content

Commit dc6d400

Browse files
KrupaPammiKrupaPammi
committed
test: centralise locators and refactor tests
1 parent 2dd97a8 commit dc6d400

16 files changed

Lines changed: 331 additions & 264 deletions

‎playwright-staging/tests/submit/addressValidation.spec.js‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,76 @@
11
// @ts-check
22
const { expect } = require('@playwright/test');
33
const { test } = require('../../browserstack');
4+
const { selectors } = require('../utils/locators');
45

56
test.describe('Address validation @sanity @nightly-sanity', () => {
67

78
test.beforeEach(async ({ page }) => {
89
// Navigate to the giftaid page
910
await page.goto(process.env.BASE_URL, { timeout: 30000 });
1011
await page.waitForLoadState('domcontentloaded');
11-
await page.locator('#field-label--giftaid').click();
12-
await page.locator('#field-input--mobile').fill('07123456789');
13-
await page.locator('input#field-input--firstname').fill('test');
14-
await page.locator('input#field-input--lastname').fill('user');
12+
await page.locator(selectors.giftaid.option).click();
13+
await page.locator(selectors.formFields.mobile).fill('07123456789');
14+
await page.locator(selectors.formFields.firstName).fill('test');
15+
await page.locator(selectors.formFields.lastName).fill('user');
1516
});
1617

1718
test('empty postcode should show error message', async ({ page }) => {
18-
await page.locator('input#field-input--postcode').fill('');
19-
await page.locator('button[type=submit]').click();
20-
await expect(page.locator('div#field-error--postcode > span')).toHaveText('Please enter your postcode');
19+
await page.locator(selectors.formFields.postcode).fill('');
20+
await page.locator(selectors.formFields.submitButton).click();
21+
await expect(page.locator(selectors.errorMessages.postcode)).toHaveText('Please enter your postcode');
2122
await page.close();
2223
});
2324

2425
test('invalid postcodes should show error messages', async ({ page }) => {
25-
await page.locator('input#field-input--postcode').fill('12SE17TP');
26-
await expect(page.locator('div#field-error--postcode > span')).toHaveText('Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
27-
await page.locator('input#field-input--postcode').fill('comic relief');
28-
await expect(page.locator('div#field-error--postcode > span')).toHaveText('Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
29-
await page.locator('input#field-input--postcode').fill('cro 7tp');
30-
await expect(page.locator('div#field-error--postcode > span')).toHaveText('Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
26+
await page.locator(selectors.formFields.postcode).fill('12SE17TP');
27+
await expect(page.locator(selectors.errorMessages.postcode)).toHaveText('Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
28+
29+
await page.locator(selectors.formFields.postcode).fill('comic relief');
30+
await expect(page.locator(selectors.errorMessages.postcode)).toHaveText('Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
31+
32+
await page.locator(selectors.formFields.postcode).fill('cro 7tp');
33+
await expect(page.locator(selectors.errorMessages.postcode)).toHaveText('Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
34+
3135
await page.close();
3236
});
3337

3438
test('enter postcode but submit without selecting address should show error message', async ({ page }) => {
35-
await page.locator('input#field-input--postcode').fill('SE1 7TP');
36-
await page.locator('#postcode_button').click();
37-
await expect(page.locator('#field-select--addressSelect')).toBeVisible();
38-
await page.locator('button[type=submit]').click();
39-
await expect(page.locator('div#field-error--addressSelect > span')).toHaveText('Please select your address');
39+
await page.locator(selectors.formFields.postcode).fill('SE1 7TP');
40+
await page.locator(selectors.formFields.postcodeLookup).click();
41+
await expect(page.locator(selectors.address.addressSelect)).toBeVisible();
42+
43+
await page.locator(selectors.formFields.submitButton).click();
44+
await expect(page.locator(selectors.errorMessages.addressSelect)).toHaveText('Please select your address');
45+
4046
await page.close();
4147
});
4248

4349
test('clicking on manual address link should show address fields', async ({ page }) => {
44-
await page.locator('input#field-input--postcode').fill('SE1 7TP');
45-
await expect(page.locator('a[aria-describedby=field-error--addressDetails]')).toBeVisible();
46-
await page.locator('a[aria-describedby=field-error--addressDetails]').click();
47-
await expect(page.locator('#field-input--address1')).toBeVisible();
48-
await expect(page.locator('#field-input--address2')).toBeVisible();
49-
await expect(page.locator('#field-input--address3')).toBeVisible();
50-
await expect(page.locator('#field-input--town')).toBeVisible();
51-
await expect(page.locator('select#field-select--country')).toBeVisible();
50+
await page.locator(selectors.formFields.postcode).fill('SE1 7TP');
51+
await expect(page.locator(selectors.address.manualAddressLink)).toBeVisible();
52+
53+
await page.locator(selectors.address.manualAddressLink).click();
54+
await expect(page.locator(selectors.address.address1)).toBeVisible();
55+
await expect(page.locator(selectors.address.address2)).toBeVisible();
56+
await expect(page.locator(selectors.address.address3)).toBeVisible();
57+
await expect(page.locator(selectors.address.town)).toBeVisible();
58+
await expect(page.locator(selectors.address.country)).toBeVisible();
59+
5260
await page.close();
5361
});
5462

5563
test('validate address fields', async ({ page }) => {
56-
await page.locator('input#field-input--postcode').fill('SE1 7TP');
57-
await page.locator('a[aria-describedby=field-error--addressDetails]').click();
58-
64+
await page.locator(selectors.formFields.postcode).fill('SE1 7TP');
65+
await page.locator(selectors.address.manualAddressLink).click();
66+
5967
// Should see error message for address1 when inout with special characters is entered
60-
await page.locator('#field-input--address1').fill('@£%3dComic Relief');
61-
await expect(page.locator('#field-error--address1 > span')).toHaveText("This field only accepts alphanumeric characters and ' . - & _ /");
62-
await page.locator('#field-input--town').fill(' Comic Relief');
63-
await expect(page.locator('#field-error--town > span')).toHaveText("This field only accepts alphanumeric characters and ' . - & _ /");
64-
68+
await page.locator(selectors.address.address1).fill('@£%3dComic Relief');
69+
await expect(page.locator(selectors.errorMessages.address1)).toHaveText("This field only accepts alphanumeric characters and ' . - & _ /");
70+
71+
await page.locator(selectors.address.town).fill(' Comic Relief');
72+
await expect(page.locator(selectors.errorMessages.town)).toHaveText("This field only accepts alphanumeric characters and ' . - & _ /");
73+
6574
await page.close();
6675
});
6776
});

‎playwright-staging/tests/submit/formValidation.spec.js‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
const { expect } = require('@playwright/test');
33
const { test } = require('../../browserstack');
44
const { Commands } = require('../utils/commands');
5+
const { selectors } = require('../utils/locators');
56

67
test.describe('Form validation @sanity @nightly-sanity', () => {
78

89
test.beforeEach(async ({ page }) => {
910
// Navigate to the giftaid page
1011
await page.goto(process.env.BASE_URL, { timeout: 30000 });
1112
await page.waitForLoadState('domcontentloaded');
12-
await page.locator('#field-label--giftaid').click();
13+
await page.locator(selectors.giftaid.option).click();
1314
});
1415

1516
test('Validate mobile number field', async ({ page }) => {
@@ -24,59 +25,59 @@ test.describe('Form validation @sanity @nightly-sanity', () => {
2425
];
2526

2627
for (let testCase of mobileTestCases) {
27-
await page.locator('#field-input--mobile').fill(''); // Clear the field before each test
28-
await page.locator('#field-input--mobile').type(testCase.input, { delay: 100 });
29-
await expect(page.locator('div#field-error--mobile > span')).toHaveText(testCase.error);
28+
await page.locator(selectors.formFields.mobile).fill(''); // Clear the field before each test
29+
await page.locator(selectors.formFields.mobile).type(testCase.input, { delay: 100 });
30+
await expect(page.locator(selectors.errorMessages.mobile)).toHaveText(testCase.error);
3031
}
3132

3233
// Validate correct mobile number
33-
await page.locator('#field-input--mobile').fill(''); // Ensure the field is cleared and filled with valid data
34+
await page.locator(selectors.formFields.mobile).fill(''); // Ensure the field is cleared and filled with valid data
3435
await commands.populateFormFields(page, { mobile: '07123456789' });
35-
await page.locator('button[type=submit]').click();
36-
await expect(page.locator('div > h1')).toHaveText('Thank you, test!');
36+
await page.locator(selectors.formFields.submitButton).click();
37+
await expect(page.locator(selectors.sorry.heading)).toHaveText('Thank you, test!');
3738
});
3839

3940
test('validate first name field', async ({ page }) => {
4041
const commands = new Commands(page);
4142

4243
// First name with invalid characters
43-
await page.locator('#field-input--firstname').fill('Test^$%£');
44-
await expect(page.locator('div#field-error--firstname')).toHaveText('This field only accepts 25 alphabetic characters and \' - starting with alphabetic characters');
44+
await page.locator(selectors.formFields.firstName).fill('Test^$%£');
45+
await expect(page.locator(selectors.errorMessages.firstName)).toHaveText('This field only accepts 25 alphabetic characters and \' - starting with alphabetic characters');
4546

4647
// First name with just a space
47-
await page.locator('#field-input--firstname').fill(' ');
48-
await expect(page.locator('div#field-error--firstname')).toHaveText('This field only accepts 25 alphabetic characters and \' - starting with alphabetic characters');
48+
await page.locator(selectors.formFields.firstName).fill(' ');
49+
await expect(page.locator(selectors.errorMessages.firstName)).toHaveText('This field only accepts 25 alphabetic characters and \' - starting with alphabetic characters');
4950

5051
// First name with alphanumeric characters
51-
await page.locator('#field-input--firstname').fill('123Test');
52-
await expect(page.locator('div#field-error--firstname')).toHaveText('This field only accepts 25 alphabetic characters and \' - starting with alphabetic characters');
52+
await page.locator(selectors.formFields.firstName).fill('123Test');
53+
await expect(page.locator(selectors.errorMessages.firstName)).toHaveText('This field only accepts 25 alphabetic characters and \' - starting with alphabetic characters');
5354

5455
// Validate correct first name
55-
await page.locator('#field-input--firstname').fill('');
56+
await page.locator(selectors.formFields.firstName).fill('');
5657
await commands.populateFormFields(page, { firstName: 'testFirstname' });
57-
await page.locator('button[type=submit]').click();
58-
await expect(page.locator('div > h1')).toHaveText('Thank you, testFirstname!');
58+
await page.locator(selectors.formFields.submitButton).click();
59+
await expect(page.locator(selectors.sorry.heading)).toHaveText('Thank you, testFirstname!');
5960
});
6061

6162
test('validate last name field', async ({ page }) => {
6263
const commands = new Commands(page);
6364

6465
// Last name with invalid characters
65-
await page.locator('#field-input--lastname').fill('Test^$%£');
66-
await expect(page.locator('div#field-error--lastname > span')).toHaveText('This field only accepts 25 alphanumeric characters and , . ( ) / & \' - starting with alphanumeric characters');
66+
await page.locator(selectors.formFields.lastName).fill('Test^$%£');
67+
await expect(page.locator(selectors.errorMessages.lastName)).toHaveText('This field only accepts 25 alphanumeric characters and , . ( ) / & \' - starting with alphanumeric characters');
6768

6869
// Last name with just a space
69-
await page.locator('#field-input--lastname').fill(' ');
70-
await expect(page.locator('div#field-error--lastname > span')).toHaveText('This field only accepts 25 alphanumeric characters and , . ( ) / & \' - starting with alphanumeric characters');
70+
await page.locator(selectors.formFields.lastName).fill(' ');
71+
await expect(page.locator(selectors.errorMessages.lastName)).toHaveText('This field only accepts 25 alphanumeric characters and , . ( ) / & \' - starting with alphanumeric characters');
7172

7273
// Last name with alphanumeric characters (valid case)
73-
await page.locator('#field-input--lastname').fill('123Test');
74-
expect(await page.locator('div#field-error--lastname > span').count()).toEqual(0);
74+
await page.locator(selectors.formFields.lastName).fill('123Test');
75+
expect(await page.locator(selectors.errorMessages.lastName).count()).toEqual(0);
7576

7677
// Validate correct last name
77-
await page.locator('#field-input--lastname').fill('');
78+
await page.locator(selectors.formFields.lastName).fill('');
7879
await commands.populateFormFields(page);
79-
await page.locator('button[type=submit]').click();
80-
await expect(page.locator('div.success-wrapper--inner h1')).toHaveText('Thank you, test!');
80+
await page.locator(selectors.formFields.submitButton).click();
81+
await expect(page.locator(selectors.success.heading)).toHaveText('Thank you, test!');
8182
});
8283
});

‎playwright-staging/tests/submit/internationalAddressesValidation.spec.js‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
const { expect } = require('@playwright/test');
33
const { test } = require('../../browserstack');
44
const { Commands } = require('../utils/commands');
5+
const { selectors } = require('../utils/locators');
56

67
test.describe('International addresses validation @sanity @nightly-sanity', () => {
78
test('selecting a non-UK country and entering a non-UK postcode should submit the form', async ({ page }) => {
@@ -12,33 +13,44 @@ test.describe('International addresses validation @sanity @nightly-sanity', () =
1213
await page.waitForLoadState('domcontentloaded');
1314

1415
// Click to activate the form and fill in default values
15-
await page.click('#field-label--giftaid');
16-
await page.fill('#field-input--mobile', '07123456789');
17-
await page.fill('input#field-input--firstname', 'test');
18-
await page.fill('input#field-input--lastname', 'user');
19-
await page.fill('input#field-input--postcode', '30916-395'); // Non-UK postcode
16+
await page.click(selectors.giftaid.option);
17+
await page.fill(selectors.formFields.mobile, '07123456789');
18+
await page.fill(selectors.formFields.firstName, 'test');
19+
await page.fill(selectors.formFields.lastName, 'user');
20+
await page.fill(selectors.formFields.postcode, '30916-395'); // Non-UK postcode
2021

2122
// Verify error message for UK postcode requirement
22-
await expect(page.locator('div#field-error--postcode > span')).toContainText('Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
23+
await expect(page.locator(selectors.errorMessages.postcode)).toContainText(
24+
'Please enter a valid UK postcode, using a space. For non-UK addresses, please use manual entry below.');
2325

2426
// Fill in address details
25-
await page.click('a[aria-describedby=field-error--addressDetails]');
26-
await page.fill('#field-input--address1', '219 Beacon St');
27-
await page.fill('#field-input--address2', 'Winder');
28-
await page.fill('input#field-input--town', 'GA');
29-
27+
await page.click(selectors.address.manualAddressLink);
28+
await page.fill(selectors.address.address1, '219 Beacon St');
29+
await page.fill(selectors.address.address2, 'Winder');
30+
await page.fill(selectors.address.town, 'GA');
31+
3032
// Select a random non-UK country
31-
const countries = await page.$$eval('select#field-select--country > option', options => options.map(option => option.value));
33+
const countries = await page.$$eval(selectors.address.countryOptions, options =>
34+
options
35+
.map(option => option.value)
36+
.filter(value => value && value !== 'GB')
37+
);
38+
3239
const randomCountryCode = countries[Math.floor(Math.random() * countries.length)];
33-
await page.selectOption('select[name="country"]', { value: randomCountryCode });
40+
await page.selectOption(selectors.address.countryByName, { value: randomCountryCode });
3441

3542
// Verify that postcode error is resolved after country change
36-
await expect(page.locator('div#field-error--postcode > span')).not.toBeVisible();
43+
await expect(page.locator(selectors.errorMessages.postcode)).not.toBeVisible();
3744

3845
// Submit the form and ensure no errors are shown for international address
39-
await commands.selectMarketingPrefs(page); // Assuming this handles checkbox interactions
40-
await page.click('button[type=submit]');
41-
await expect(page.locator('div.success-wrapper--inner h1')).toContainText('Thank you, test!');
46+
await commands.selectMarketingPrefs(page);
47+
48+
await Promise.all([
49+
page.waitForNavigation(),
50+
page.click(selectors.formFields.submitButton),
51+
]);
52+
53+
await expect(page.locator(selectors.success.heading)).toContainText('Thank you, test!');
4254

4355
await page.close();
4456
});

‎playwright-staging/tests/submit/marketingPreferencesData.spec.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const { expect } = require('@playwright/test');
33
const { test } = require('../../browserstack');
44
const { Commands } = require('../utils/commands');
55
const { MarketingPrefsVerify } = require('../utils/marketingPrefsVerify');
6+
const { selectors } = require('../utils/locators');
67

78
const Chance = require('chance');
89
const chance = new Chance();
@@ -24,7 +25,7 @@ test('Verify giftaid marketing preferences data in contact-store @sanity @nightl
2425
// Navigate to the giftaid page
2526
await page.goto(process.env.BASE_URL, { timeout: 30000 });
2627
await page.waitForLoadState('load');
27-
await page.locator('#field-label--giftaid').click();
28+
await page.locator(selectors.giftaid.option).click();
2829

2930
// Populate all input fields using Commands class
3031
await commands.populateFormFields(page, {
@@ -35,10 +36,10 @@ test('Verify giftaid marketing preferences data in contact-store @sanity @nightl
3536
await commands.selectMarketingPrefs(page, { email, phone });
3637

3738
// Submit the form
38-
await page.locator('button[type=submit]').click();
39+
await page.locator(selectors.formFields.submitButton).click();
3940

4041
// Verify success message
41-
await expect(page.locator('div.success-wrapper--inner h1')).toHaveText(`Thank you, ${firstName}!`);
42+
await expect(page.locator(selectors.success.heading)).toHaveText(`Thank you, ${firstName}!`);
4243

4344
// Retrieve and verify marketing preferences data
4445
const mpData = await MarketingPrefsVerify.get(email);

0 commit comments

Comments
 (0)