Upgrade wdio local-runner to to v9.9.3

.github/dependabot.yaml

@@ -44,10 +44,6 @@ updates:
       - dependency-name: "eslint*"
         update-types: [ "version-update:semver-major" ]
 
-      # temporarily pinned to minor/patch only - wdio v9 causes getHTML() to return strings with indentation & newlines, causing assertion errors - needs investigation
-      - dependency-name: "@wdio/local-runner"
-        update-types: [ "version-update:semver-major" ]
-
   - package-ecosystem: "pip"
     directory: "/"
     schedule:

package.json

@@ -28,10 +28,10 @@
         "@babel/preset-env": "^7.25.8",
         "@babel/register": "^7.25.7",
         "@babel/runtime": "^7.25.7",
-        "@wdio/cli": "^9.2.1",
-        "@wdio/local-runner": "^8.14.3",
-        "@wdio/mocha-framework": "^9.1.3",
-        "@wdio/spec-reporter": "^9.1.3",
+        "@wdio/cli": "^9.9.3",
+        "@wdio/local-runner": "^9.9.3",
+        "@wdio/mocha-framework": "^9.9.0",
+        "@wdio/spec-reporter": "^9.9.0",
         "eslint": "^v8.57.1",
         "eslint-cli": "^1.1.1",
         "eslint-config-standard": "^17.1.0",

tests/functional/helpers.js

@@ -45,8 +45,13 @@ export const click = async (selector) => {
   // but clicks down on the very top of the button which moves down and just below the mouse. When the mouse click is released
   // it's no longer over the button and the click silently fails. This means that when the test comes to do assertions on the following page
   // they fail, as we never navigated to that page.
-  await $(selector).scrollIntoView({ block: "center", inline: "center" });
-  await $(selector).click();
+  const element = await $(selector);
+  await element.waitForDisplayed();
+  await browser.execute((el) => {
+    el.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+  }, element);
+  await element.waitForClickable();
+  await element.click();
 
   // Allow time in case the click loads a new page.
   await browser.pause(100);

tests/functional/spec/checkbox.spec.js

@@ -44,8 +44,8 @@ describe('Checkbox with "other" option', () => {
     // When
     await click(MandatoryCheckboxPage.submit());
     // Then
-    await expect(await $(MandatoryCheckboxPage.error()).getHTML()).toContain(
-      'Select at least one answer <span class="ons-u-vh">to ‘Which pizza toppings would you like?’</span></a>',
+    await expect(await $(MandatoryCheckboxPage.error()).getHTML({ includeSelectorTag: false })).toContain(
+      'Select at least one answer\n<span class="ons-u-vh">to ‘Which pizza toppings would you like?’</span>',
     );
   });
 

tests/functional/spec/components/address/address.spec.js

@@ -21,7 +21,6 @@ describe("Address Answer Type", () => {
       await click(AddressConfirmation.submit());
       await verifyUrlContains(SubmitPage.pageName);
       await expect(await $(SubmitPage.addressMandatory()).getText()).toBe("Evelyn Street\nApt 7\nBarry\nCF63 4JG");
-      await expect(await $(SubmitPage.addressMandatory()).getHTML()).toContain("Evelyn Street<br>Apt 7<br>Barry<br>CF63 4JG");
     });
   });
 

tests/functional/spec/components/checkbox/checkbox_detail_answer_multiple.spec.js

@@ -2,19 +2,19 @@ import MandatoryCheckboxPage from "../../../generated_pages/checkbox_detail_answ
 import SubmitPage from "../../../generated_pages/checkbox_detail_answer_multiple/submit.page";
 import { click, verifyUrlContains } from "../../../helpers";
 describe('Checkbox with multiple "detail_answer" options', () => {
-  const checkboxSchema = "test_checkbox_detail_answer_multiple.json";
+  beforeEach(async () => {
+    // Given
+    await browser.openQuestionnaire("test_checkbox_detail_answer_multiple.json");
+  });
 
   it("Given detail answer options are available, When the user clicks an option, Then the detail answer input should be visible.", async () => {
-    await browser.openQuestionnaire(checkboxSchema);
     await $(MandatoryCheckboxPage.yourChoice()).click();
     await expect(await $(MandatoryCheckboxPage.yourChoiceDetail()).isDisplayed()).toBe(true);
     await $(MandatoryCheckboxPage.cheese()).click();
     await expect(await $(MandatoryCheckboxPage.cheeseDetail()).isDisplayed()).toBe(true);
   });
 
   it("Given a mandatory detail answer, When I select the option but leave the input field empty and submit, Then an error should be displayed.", async () => {
-    // Given
-    await browser.openQuestionnaire(checkboxSchema);
     // When
     // Non-Mandatory detail answer given
     await $(MandatoryCheckboxPage.cheese()).click();
@@ -29,7 +29,6 @@ describe('Checkbox with multiple "detail_answer" options', () => {
 
   it("Given a selected checkbox answer with an error for a mandatory detail answer, When I enter valid value and submit the page, Then the error is cleared and I navigate to next page.", async () => {
     // Given
-    await browser.openQuestionnaire(checkboxSchema);
     await $(MandatoryCheckboxPage.yourChoice()).click();
     await click(MandatoryCheckboxPage.submit());
     await expect(await $(MandatoryCheckboxPage.error()).isDisplayed()).toBe(true);
@@ -41,8 +40,6 @@ describe('Checkbox with multiple "detail_answer" options', () => {
   });
 
   it("Given a non-mandatory detail answer, When the user does not provide any text, Then just the option value should be displayed on the summary screen", async () => {
-    // Given
-    await browser.openQuestionnaire(checkboxSchema);
     // When
     await $(MandatoryCheckboxPage.cheese()).click();
     await expect(await $(MandatoryCheckboxPage.cheeseDetail()).isDisplayed()).toBe(true);
@@ -52,8 +49,6 @@ describe('Checkbox with multiple "detail_answer" options', () => {
   });
 
   it("Given multiple detail answers, When the user provides text for all, Then that text should be displayed on the summary screen", async () => {
-    // Given
-    await browser.openQuestionnaire(checkboxSchema);
     // When
     await $(MandatoryCheckboxPage.cheese()).click();
     await $(MandatoryCheckboxPage.cheeseDetail()).setValue("Mozzarella");
@@ -65,8 +60,6 @@ describe('Checkbox with multiple "detail_answer" options', () => {
   });
 
   it("Given multiple detail answers, When the user provides text for just one, Then that text should be displayed on the summary screen", async () => {
-    // Given
-    await browser.openQuestionnaire(checkboxSchema);
     // When
     await $(MandatoryCheckboxPage.yourChoice()).click();
     await $(MandatoryCheckboxPage.yourChoiceDetail()).setValue("Bacon");
@@ -76,8 +69,6 @@ describe('Checkbox with multiple "detail_answer" options', () => {
   });
 
   it("Given I have previously added text in a detail answer and saved, When I uncheck the detail answer option and select a different checkbox, Then the text entered in the detail answer field should be empty.", async () => {
-    // Given
-    await browser.openQuestionnaire(checkboxSchema);
     // When
     await $(MandatoryCheckboxPage.cheese()).click();
     await $(MandatoryCheckboxPage.cheeseDetail()).setValue("Mozzarella");

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_currency.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Currency With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-currency");
+    await browser.pause(1000);
+    await browser.url(CurrencyPage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive currency answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_day_month_year_date.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Day Month Year Date With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-date");
+    await browser.pause(1000);
+    await browser.url(DatePage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive month year date answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_duration.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Duration With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-duration");
+    await browser.pause(1000);
+    await browser.url(DurationPage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive duration answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_month_year_date.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Month Year Date With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-month-year-date");
+    await browser.pause(1000);
+    await browser.url(MonthYearDatePage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive month year date answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_multiple_day_month_year_date.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Day Month Year Date With Multiple Radio Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive_multiple.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-date");
+    await browser.pause(1000);
+    await browser.url(DatePage.url());
   });
   describe("Given the user has entered a value for the non-exclusive month year date answer", () => {
     beforeEach(async () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_multiple_textfield.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Textfield With Multiple Radio Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive_multiple.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-textfield");
+    await browser.pause(1000);
+    await browser.url(TextFieldPage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive textfield answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_number.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Number With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-number");
+    await browser.pause(1000);
+    await browser.url(NumberPage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive number answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_percentage.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Percentage With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-percentage");
+    await browser.pause(1000);
+    await browser.url(PercentagePage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive percentage answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_textarea.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive TextArea With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-textarea");
+    await browser.pause(1000);
+    await browser.url(TextFieldPage.url());
   });
 
   describe("Given the user has not clicked the mutually exclusive checkbox answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_textfield.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Textfield With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-textfield");
+    await browser.pause(1000);
+    await browser.url(TextFieldPage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive textfield answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_unit.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Unit With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-unit");
+    await browser.pause(1000);
+    await browser.url(UnitPage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive unit answer", () => {

tests/functional/spec/components/checkbox/mutually_exclusive/mutually_exclusive_year_date.spec.js

@@ -5,8 +5,8 @@ import { click } from "../../../../helpers";
 describe("Component: Mutually Exclusive Year Date With Single Checkbox Override", () => {
   beforeEach(async () => {
     await browser.openQuestionnaire("test_mutually_exclusive.json");
-    await browser.pause(100);
-    await browser.url("/questionnaire/mutually-exclusive-year-date");
+    await browser.pause(1000);
+    await browser.url(YearDatePage.url());
   });
 
   describe("Given the user has entered a value for the non-exclusive year date answer", () => {

tests/functional/spec/components/radio/radio.js

@@ -50,8 +50,8 @@ describe("Component: Radio", () => {
 
     it("When I have submitted the page without any option, Then the question text is hidden in the error message using a span element", async () => {
       await click(RadioMandatoryOverriddenPage.submit());
-      await expect(await $(RadioMandatoryOverriddenPage.errorNumber(1)).getHTML()).toContain(
-        'Select an answer <span class="ons-u-vh">to ‘What do you prefer for breakfast?’</span></a>',
+      await expect(await $(RadioMandatoryOverriddenPage.errorNumber(1)).getHTML({ includeSelectorTag: false })).toContain(
+        'Select an answer\n<span class="ons-u-vh">to ‘What do you prefer for breakfast?’</span>',
       );
     });
   });

tests/functional/spec/cookie_banner.spec.js

@@ -16,6 +16,7 @@ describe("Given I start a survey,", () => {
     await expect(await $(InitialPage.acceptCookies()).isDisplayed()).toBe(true);
   });
   it("When I delete all cookies from the browser and refresh the page, Then the cookie banner shouldn‘t be displayed", async () => {
+    await expect(await $(InitialPage.acceptCookies()).isDisplayed()).toBe(true);
     await browser.deleteAllCookies();
     await browser.refresh();
     await expect(await $(InitialPage.acceptCookies()).isDisplayed()).toBe(false);

tests/functional/spec/hub_and_spoke/hub_and_spoke.spec.js

@@ -30,6 +30,7 @@ describe("Feature: Hub and Spoke", () => {
   describe("Given I am completing the test_hub_context schema,", () => {
     beforeEach("load the survey", async () => {
       await browser.openQuestionnaire(hubAndSpokeSchema);
+      await browser.pause(1000);
     });
 
     it("When a user first views the Hub, The Hub should be in a continue state", async () => {
@@ -310,6 +311,7 @@ describe("Feature: Hub and Spoke", () => {
         sdsDatasetId: "203b2f9d-c500-8175-98db-86ffcfdccfa3",
         responseId,
       });
+      await browser.pause(10000);
     });
 
     it("When all the repeating sections are complete, Then the hub should be displayed", async () => {

tests/functional/spec/introduction.spec.js

@@ -7,7 +7,6 @@ describe("Introduction page", () => {
   });
 
   it("Given I start a survey, When I view the introduction page, Then I should be able to see introduction information", async () => {
-    await browser.openQuestionnaire(introductionSchema);
     await expect(await $(IntroductionPage.useOfData()).getText()).toContain("How we use your data");
     await expect(await $(IntroductionPage.useOfInformation()).getText()).toContain(
       "Data should relate to all sites in England, Scotland and Wales unless otherwise stated.",
@@ -19,13 +18,11 @@ describe("Introduction page", () => {
     );
   });
   it("Given I start a survey, When preview content is set on the introduction page, Then the content headings should be displayed at the correct level", async () => {
-    await browser.openQuestionnaire(introductionSchema);
     const introQuestionH3Selector = `${IntroductionPage.introQuestion()} h3`;
     const h3Exists = await $(introQuestionH3Selector).isExisting();
     await expect(h3Exists).toBe(true);
   });
   it("Given I start a survey with introduction guidance set, When I view the introduction page, Then I should be able to see introduction guidance", async () => {
-    await browser.openQuestionnaire(introductionSchema);
     await expect(await $(IntroductionPage.guidancePanel(1)).isDisplayed()).toBe(true);
     await expect(await $(IntroductionPage.guidancePanel(1)).getText()).toContain("Coronavirus (COVID-19) guidance");
     await expect(await $(IntroductionPage.guidancePanel(1)).getText()).toContain(

tests/functional/spec/list_collector/list_collector_primary_person.spec.js

@@ -10,22 +10,6 @@ import AnyoneUsuallyLiveAtPage from "../../generated_pages/list_collector_primar
 import { click, verifyUrlContains } from "../../helpers";
 
 describe("Primary Person List Collector Survey", () => {
-  describe("Given the user starts on the 'do you live here' question", () => {
-    before("Load the survey", async () => {
-      await browser.openQuestionnaire("test_list_collector_primary_person.json");
-    });
-
-    it.skip("When the user says they do not live there, and changes their answer to yes, then the user can't navigate to the list collector", async () => {
-      await $(PrimaryPersonListCollectorPage.noLabel()).click();
-      await click(PrimaryPersonListCollectorPage.submit());
-      await $(PrimaryPersonListCollectorAddPage.previous()).click();
-      await $(PrimaryPersonListCollectorPage.yesLabel()).click();
-      await click(PrimaryPersonListCollectorPage.submit());
-      await browser.url("questionnaire/list-collector");
-      await expect(await $(PrimaryPersonListCollectorPage.questionText()).getText()).toBe("Do you live here");
-    });
-  });
-
   describe("Given the user starts on the 'do you live here' question", () => {
     before("Load the survey", async () => {
       await browser.openQuestionnaire("test_list_collector_primary_person.json");

tests/functional/spec/question_description.spec.js

@@ -9,7 +9,8 @@ import { click, verifyUrlContains } from "../helpers";
 describe("Question description", () => {
   it("Given a question description has been set in the schema as an array, When it is rendered, Then it is displayed correctly as multiple paragraph attributes", async () => {
     await browser.openQuestionnaire("test_question_description.json");
-    await expect(await $(NameBlockPage.questionTitle()).getHTML()).toContain("<p>Answer the question</p><p>Go on</p>");
+    await verifyUrlContains(NameBlockPage.pageName);
+    await expect(await $(NameBlockPage.questionTitle()).getText()).toContain("Answer the question\nGo on");
   });
 });
 

tests/functional/spec/supplementary_data/supplementary_data.spec.js

@@ -45,8 +45,10 @@ describe("Using supplementary data", () => {
       sdsDatasetId: "203b2f9d-c500-8175-98db-86ffcfdccfa3",
       responseId,
     });
+    await browser.pause(10000);
   });
   it("Given I launch a survey using supplementary data, When I am outside a repeating section, Then I am able to see the list of items relating to a given supplementary data list item on the page", async () => {
+    await browser.url(LoadedSuccessfullyBlockPage.url());
     await expect(await $("#main-content #guidance-1").getText()).toContain("The surnames of the employees are: Potter, Kent.");
     await expect(await $$("#main-content li")[0].getText()).toBe("Articles and equipment for sports or outdoor games");
     await expect(await $$("#main-content li")[1].getText()).toBe("Kitchen Equipment");

tests/functional/spec/theme_dbt.spec.js

@@ -9,7 +9,7 @@ describe("Theme DBT", () => {
 
     it("When I navigate to the radio page, Then I should see DBT theme content", async () => {
       await verifyUrlContains(RadioPage.pageName);
-      await expect(await $("#dbt-logo-alt").getHTML()).toContain("Department for Business and Trade");
+      await expect(await $("#dbt-logo-alt").getText()).toContain("Department for Business and Trade");
     });
   });
 });