From d9821eb50b3ee3c2041faa5bc3bb28a3b05cb423 Mon Sep 17 00:00:00 2001 From: John Robertson Date: Thu, 8 Feb 2024 12:31:50 +0000 Subject: [PATCH] Fix e2e tests after govuk-frontend update to v5.1.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Looking at what is in the 5.1.0 release, it includes a change to radio and checkbox styling, which I believe is what is causing the issue. https://github.com/alphagov/govuk-frontend/pull/4093. It looks like the removal of the `z-index` on `.govuk-radios__input` and `.govuk-checkboxes__input` has meant they now have `z-index: auto` but the styled `label:before` and :`after` have `z-index: 1` which causes them to be higher in the `z-order` than the inputs, which means they’re underneath another element and technically not clickable. Adding `force: true`, forces the click on the radio button and checkbox even though it is covered by the labels pseudo elements. This does not affect the actual usability. --- tests/refer.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/tests/refer.spec.ts b/tests/refer.spec.ts index d1915b3..885d7e1 100644 --- a/tests/refer.spec.ts +++ b/tests/refer.spec.ts @@ -64,13 +64,13 @@ const entersProgrammeHistory = async (page: Page): Promise => { await page.getByTestId('add-history-button').click() await expect(page.locator('h1')).toHaveText('Add Accredited Programme history') - await page.getByLabel('Horizon').click() + await page.getByLabel('Horizon').click({ force: true }) await page.getByRole('button', { name: 'Continue' }).click() await expect(page.locator('h1')).toHaveText('Add Accredited Programme details') - await page.getByTestId('custody-setting-option').click() + await page.getByTestId('custody-setting-option').click({ force: true }) await page.getByLabel('Enter the prison (if known)').fill('Stocken (HMP)') - await page.getByTestId('complete-outcome-option').click() + await page.getByTestId('complete-outcome-option').click({ force: true }) await page.getByLabel('Enter the year completed (if known)').fill('2020') await page.getByLabel('Provide additional detail (if known)').fill('Spiffing') await page.getByLabel('Provide the source').fill('The person sat next to me') @@ -93,7 +93,7 @@ const entersProgrammeHistory = async (page: Page): Promise => { const confirmsOasys = async (page: Page): Promise => { await page.getByRole('link', { name: 'Confirm the OASys information' }).click() await expect(page.locator('h1')).toHaveText('Confirm the OASys information') - await page.getByLabel('I confirm that the OASys information is up to date.').check() + await page.getByLabel('I confirm that the OASys information is up to date.').check({ force: true }) await page.getByRole('button', { name: 'Save and continue' }).click() await expect(page.getByTestId('confirm-oasys-tag')).toHaveText('Completed') } @@ -112,7 +112,7 @@ const showsCheckAnswersBeforeSubmitting = async (page: Page): Promise => { } const completesAReferral = async (page: Page): Promise => { - await page.locator('input[name="confirmation"]').check() + await page.locator('input[name="confirmation"]').check({ force: true }) await page.getByRole('button', { name: 'Submit referral' }).click() await expect(page.locator('h1')).toHaveText('Referral complete') }