diff --git a/playwright-local/tests/update/formValidation.spec.js b/playwright-local/tests/update/formValidation.spec.js index 4b04cf12..13750836 100644 --- a/playwright-local/tests/update/formValidation.spec.js +++ b/playwright-local/tests/update/formValidation.spec.js @@ -5,7 +5,7 @@ const { v4: uuidv4 } = require('uuid'); const Chance = require('chance'); const chance = new Chance(); -test.describe('Giftaid update form validation', () => { +test.describe.only('Giftaid update form validation', () => { let transactionId; test.beforeEach(async ({ page }) => { @@ -52,8 +52,24 @@ test.describe('Giftaid update form validation', () => { // Enter a valid transaction ID and submit the form to validate successful submission await page.fill('input#field-input--transactionId', ''); // clear the transaction field await commands.populateUpdateFormFields(page); // populate giftaid update form - await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click(); // Select yes option for declaration - await page.click('button[type=submit]'); // Submit the form + + // Select yes option for declaration + // Ensure declaration element is visible + await page.waitForSelector('#giftAidClaimChoice>div:nth-child(2)>label', { state: 'visible' }); + + // Check the visibility of the radio button + const isVisible = await page.isVisible('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is visible:', isVisible); + const isDisabled = await page.isDisabled('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is disabled:', isDisabled); + + // Perform the click + const label = page.locator('#giftAidClaimChoice>div:nth-child(2)>label'); + await label.scrollIntoViewIfNeeded(); + await label.click(); + + await page.locator('button[type=submit]').click(); // Submit the form + await expect(page.locator('div > h1')).toHaveText('Thank you, test!'); await page.close(); }); @@ -79,8 +95,23 @@ test.describe('Giftaid update form validation', () => { // Test for a valid first name await page.fill('#field-input--firstname', ''); // clear firstname field await commands.populateUpdateFormFields(page, { firstName: 'John' }); - await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click(); // Select yes option for declaration - await page.click('button[type=submit]'); // Submit the form + + // Select yes option for declaration + // Ensure declaration element is visible + await page.waitForSelector('#giftAidClaimChoice>div:nth-child(2)>label', { state: 'visible' }); + + // Check the visibility of the radio button + const isVisible = await page.isVisible('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is visible:', isVisible); + const isDisabled = await page.isDisabled('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is disabled:', isDisabled); + + // Perform the click + const label = page.locator('#giftAidClaimChoice>div:nth-child(2)>label'); + await label.scrollIntoViewIfNeeded(); + await label.click(); + + await page.locator('button[type=submit]').click(); // Submit the form await expect(page.locator('div > h1')).toHaveText('Thank you, John!'); await page.close(); @@ -114,8 +145,23 @@ test.describe('Giftaid update form validation', () => { const validEmail = 'test@comicrelief.com'; await page.fill('input#field-input--email', ''); // clear email field await commands.populateUpdateFormFields(page, { email: validEmail }); - await page.locator('#giftAidClaimChoice>div:nth-child(3)>label').click(); // Select 'no' for declaration - await page.click('button[type=submit]'); // Submit the form + + // Select no option for declaration + // Ensure declaration element is visible + await page.waitForSelector('#giftAidClaimChoice>div:nth-child(3)>label', { state: 'visible' }); + + // Check the visibility of the radio button + const isVisible = await page.isVisible('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is visible:', isVisible); + const isDisabled = await page.isDisabled('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is disabled:', isDisabled); + + // Perform the click + const label = page.locator('#giftAidClaimChoice>div:nth-child(2)>label'); + await label.scrollIntoViewIfNeeded(); + await label.click(); + + await page.locator('button[type=submit]').click(); // Submit the form await expect(page.locator('div > h1')).toHaveText('Thanks for letting us know'); await page.close(); @@ -163,8 +209,23 @@ test.describe('Giftaid update form validation', () => { await page.locator('input#field-input--lastname').fill(chance.last()); await page.locator('input#field-input--email').fill(`giftaid-update-staging-${chance.email()}`); await page.fill('input#field-input--postcode', 'SE1 7TP'); - await page.click('#giftAidClaimChoice>div:nth-child(2)>label'); // Select yes for declaration - await page.click('button[type=submit]'); // Submit the form + + // Select yes option for declaration + // Ensure declaration element is visible + await page.waitForSelector('#giftAidClaimChoice>div:nth-child(2)>label', { state: 'visible' }); + + // Check the visibility of the radio button + const isVisible = await page.isVisible('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is visible:', isVisible); + const isDisabled = await page.isDisabled('#giftAidClaimChoice>div:nth-child(2)>label'); + console.log('Is disabled:', isDisabled); + + // Perform the click + const label = page.locator('#giftAidClaimChoice>div:nth-child(2)>label'); + await label.scrollIntoViewIfNeeded(); + await label.click(); + + await page.locator('button[type=submit]').click(); // Submit the form await expect(page.locator('div > h1')).toHaveText('Thank you, test!'); await page.close();