Dtspb 2849 fe puppeteer to playwright

.gitignore

@@ -35,3 +35,11 @@ dump.rdb
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -42,7 +42,7 @@
     "test-e2e-gop-creditCardPaymentCancellation-http": "NODE_ENV=testing-http NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/other/creditCardPaymentCancellation.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --steps",
     "test-e2e-gop-single-exec-http": "NODE_ENV=testing-http NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/probate/gopSingleExecutor.en.test.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --steps",
     "test-e2e-gop-single-exec-http-webriver": "NODE_ENV=testing-http NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/probate/gopSingleExecutor.en.test.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/codecept.webdriver.conf.js --steps --reporter mochawesome",
-    "test-e2e-gop-single-exec-http-dk": "NODE_ENV=testing-http-dk NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/probate/gopSingleExecutor.en.test.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --steps --reporter mochawesome",
+    "test-e2e-gop-single-exec-http-dk": "NODE_ENV=testing NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/probate/gopSingleExecutor.en.test.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --steps",
     "test-e2e-gop-single-exec-EE-No-http-dk": "NODE_ENV=testing-http-dk NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/probate/gopSingleExecutor.en.test.EE.no.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --steps --reporter mochawesome",
     "test-e2e-gop-single-exec-EE-Yes-http-dk": "NODE_ENV=testing-http-dk NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/probate/gopSingleExecutor.en.test.EE.yes.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --steps --reporter mochawesome",
     "test-e2e-intestacy-http": "NODE_ENV=testing-http NODE_PATH=. FE_E2E_TEST_PATH_TO_RUN=./paths/intestacy/intestacy.en.test.js node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --steps",
@@ -140,8 +140,7 @@
     "nunjucks": "^3.2.4",
     "otp": "^0.1.3",
     "pa11y": "^6.2.3",
-    "puppeteer": "^20.7.3",
-    "puppeteer-core": "^20.7.3",
+    "playwright": "^1.41.2",
     "randomstring": "^1.2.3",
     "readdir": "^0.1.0",
     "request": "^2.88.2",
@@ -159,6 +158,8 @@
   "devDependencies": {
     "@pact-foundation/pact": "^9.18.1",
     "@pact-foundation/pact-node": "^10.17.7",
+    "@playwright/test": "^1.41.2",
+    "@types/node": "^20.11.16",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-http": "^4.3.0",
@@ -178,8 +179,6 @@
     "phantomjs-prebuilt": "^2.1.16",
     "pre-commit": "^1.2.2",
     "proxyquire": "^2.1.3",
-    "puppeteer": "^20.7.3",
-    "puppeteer-core": "^20.7.3",
     "rewire": "^6.0.0",
     "selenium-standalone": "^6.24.0",
     "sinon": "^15.0.4",
@@ -200,9 +199,7 @@
     "minimist": "1.2.8",
     "async": ">=2.6.4",
     "cookiejar": ">=2.1.4",
-    "qs": ">=6.9.7",
-    "puppeteer": "^20.7.3",
-    "puppeteer-core": "^20.7.3"
+    "qs": ">=6.9.7"
   },
   "packageManager": "[email protected]"
 }

test/end-to-end/codecept.conf.js

@@ -5,11 +5,12 @@ exports.config = {
     tests: testConfig.TestPathToRun,
     output: `${process.cwd()}/${testConfig.TestOutputDir}`,
     helpers: {
-        Puppeteer: {
+        Playwright: {
             url: testConfig.TestE2EFrontendUrl,
             waitForTimeout: 120000,
             getPageTimeout: 120000,
             show: TestConfigurator.showBrowser(),
+            waitForNavigation: 'domcontentloaded',
             chrome: {
                 ignoreHTTPSErrors: true,
                 'ignore-certificate-errors': true,
@@ -27,8 +28,8 @@ exports.config = {
                 ]
             },
         },
-        PuppeteerHelper: {
-            require: './helpers/PuppeteerHelper.js'
+        PlaywrightHelper: {
+            require: './helpers/PlaywrightHelper.js'
         },
         JSWait: {
             require: './helpers/JSWait.js'

test/end-to-end/helpers/JSWait.js

@@ -10,8 +10,9 @@ class JSWait extends codecept_helper {
     }
 
     async navByClick(textOrLocator, locator = null, webDriverWait = 2) {
-        const helper = this.helpers.WebDriver || this.helpers.Puppeteer;
-        const helperIsPuppeteer = this.helpers.Puppeteer;
+        const helper = this.helpers.WebDriver || this.helpers.Playwright;
+        const helperIsPlaywright = this.helpers.Playwright;
+        //await helper.wait(webDriverWait);
 
         if (locator) {
             locator = this.appendNotCookieBannerToSelector(locator);
@@ -33,18 +34,22 @@ class JSWait extends codecept_helper {
             await helper.waitForEnabled(textOrLocator);
         }
 
-        if (helperIsPuppeteer) {
+        if (helperIsPlaywright) {
 
-            const promises = [
+            /*const promises = [
                 helper.page.waitForNavigation({
-                    waitUntil: ['domcontentloaded', 'networkidle0'],
+                    waitUntil: ['domcontentloaded'],
                     timeout: 600000
                 }),
                 helper.click(textOrLocator)
             ];
+*/
+            const promises = [
+                helper.click(textOrLocator)
+            ];
 
             await Promise.all(promises);
-
+            await helper.wait(webDriverWait);
             return;
         }
 
@@ -56,7 +61,6 @@ class JSWait extends codecept_helper {
         await helper.click(textOrLocator);
         await helper.wait(webDriverWait);
     }
-
     appendNotCookieBannerToSelector(locator) {
         const notCookieBanner = ':not([data-cm-action])';
         if (typeof (locator) === 'string' && locator.indexOf('govuk-button') >= 0) {
@@ -69,35 +73,35 @@ class JSWait extends codecept_helper {
 
     async amOnLoadedPage (url, language ='en') {
         let newUrl = `${url}?lng=${language}`;
-        const helper = this.helpers.WebDriver || this.helpers.Puppeteer;
-        const helperIsPuppeteer = this.helpers.Puppeteer;
+        const helper = this.helpers.WebDriver || this.helpers.Playwright;
+        const helperIsPlaywright = this.helpers.Playwright;
 
-        if (helperIsPuppeteer) {
+        if (helperIsPlaywright) {
             if (newUrl.indexOf('http') !== 0) {
                 newUrl = helper.options.url + newUrl;
             }
 
-            await Promise.all([
-                helper.page.waitForNavigation({waitUntil: 'networkidle0'}),
+            /*await Promise.all([
+                helper.page.waitForNavigation({waitUntil: ['domcontentloaded']}),
                 helper.page.goto(newUrl).catch(err => {
                     console.error(err.message);
                 })
             ]);
 
-        } else {
+        } else {*/
             await helper.amOnPage(newUrl);
             await helper.waitInUrl(url);
             await helper.waitForElement('body');
         }
     }
 
     async enterAddress() {
-        const helper = this.helpers.WebDriver || this.helpers.Puppeteer;
-        const helperIsPuppeteer = this.helpers.Puppeteer;
+        const helper = this.helpers.WebDriver || this.helpers.Playwright;
+        const helperIsPlaywright = this.helpers.Playwright;
         const page = helper.page;
 
-        if (helperIsPuppeteer) {
-            await page.waitForSelector('#addressLine1', {visible: false, timeout: 5000});
+        if (helperIsPlaywright) {
+            //await page.waitForSelector('#addressLine1', {visible: false, timeout: 5000});
             await page.click('.govuk-details__summary-text');
             await page.waitForSelector('#addressLine1', {visible: true, timeout: 5000});
 
@@ -123,12 +127,12 @@ class JSWait extends codecept_helper {
 
     async checkInUrl(url, timeoutWait=120) {
         // do for both Puppeteer and Webdriver - doesn't take long
-        const helper = this.helpers.WebDriver || this.helpers.Puppeteer;
+        const helper = this.helpers.WebDriver || this.helpers.Playwright;
         await helper.waitInUrl(url, timeoutWait);
     }
 
     async checkForText(text, timeout = null) {
-        const helper = this.helpers.WebDriver || this.helpers.Puppeteer;
+        const helper = this.helpers.WebDriver || this.helpers.Playwright;
         try {
             await helper.waitForText(text, timeout);
         } catch (e) {

test/end-to-end/helpers/PuppeteerHelper.js → test/end-to-end/helpers/PlaywrightHelper.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const Helper = codecept_helper;
-const helperName = 'Puppeteer';
+const helperName = 'Playwright';
 const testConfig = require('config');
 
 const countObjects = async (page) => {
@@ -15,7 +15,7 @@ const countObjects = async (page) => {
     return numberOfObjects;
 };
 
-class PuppeteerHelper extends Helper {
+class PlaywrightHelper extends Helper {
 
     clickBrowserBackButton() {
         const page = this.helpers[helperName].page;
@@ -49,4 +49,4 @@ class PuppeteerHelper extends Helper {
         console.log(`${pageName}>>>>`, numberOfObjectsAfter);
     }
 }
-module.exports = PuppeteerHelper;
+module.exports = PlaywrightHelper;

test/end-to-end/pages/deceased/diedengorwales.js

@@ -1,12 +1,13 @@
 'use strict';
 
+const config = require('config');
 module.exports = async function(language = 'en', answer = null) {
     const I = this;
     const commonContent = require(`app/resources/${language}/translation/common`);
 
     await I.checkInUrl('/died-eng-or-wales');
     const locator = {css: `#diedEngOrWales${answer}`};
-    await I.waitForEnabled(locator);
+    await I.waitForEnabled(locator, config.TestWaitForElementToAppear);
     await I.click(locator);
     await I.navByClick(commonContent.saveAndContinue, 'button.govuk-button');
 };

test/end-to-end/pages/iht/paper.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const config = require('config');
 module.exports = async function(language ='en', formName = null) {
     const commonContent = require(`app/resources/${language}/translation/common`);
     const I = this;
@@ -21,7 +22,7 @@ module.exports = async function(language ='en', formName = null) {
 
     await I.checkInUrl('/estate-form');
     const locator = {css: `#ihtFormId${option}`};
-    await I.waitForEnabled(locator);
+    await I.waitForEnabled(locator, config.TestWaitForElementToAppear);
     await I.click(locator);
 
     await I.navByClick(commonContent.saveAndContinue, 'button.govuk-button');

test/end-to-end/pages/language/bilingualgrant.js

@@ -1,12 +1,13 @@
 'use strict';
 
-module.exports = async function(language = 'en', answer = null) {
+const config = require('config');
+module.exports = async function(language = 'en', answer) {
     const I = this;
     const commonContent = require(`app/resources/${language}/translation/common`);
 
     await I.checkInUrl('/bilingual-gop');
     const locator = {css: `#bilingual${answer}`};
-    await I.waitForEnabled(locator);
+    await I.waitForEnabled(locator, config.TestWaitForElementToAppear);
     await I.seeCheckboxIsChecked(locator);
     await I.navByClick(commonContent.saveAndContinue, 'button.govuk-button');
 };

test/end-to-end/pages/will/codicils.js

@@ -1,12 +1,13 @@
 'use strict';
 
+const config = require('config');
 module.exports = async function(language = 'en', option = null) {
     const I = this;
     const commonContent = require(`app/resources/${language}/translation/common`);
 
     await I.checkInUrl('/will-codicils');
     const locator = {css: `#codicils${option}`};
-    await I.waitForEnabled(locator);
+    await I.waitForEnabled(locator, config.TestWaitForElementToAppear);
     await I.click(locator);
 
     await I.navByClick(commonContent.saveAndContinue, 'button.govuk-button');

test/end-to-end/pages/will/damagedate.js

@@ -1,12 +1,13 @@
 'use strict';
 
+const config = require('config');
 module.exports = async function(language = 'en', option = null, year = null) {
     const I = this;
     const commonContent = require(`app/resources/${language}/translation/common`);
 
     await I.checkInUrl('/will-damage-date');
     const locator = {css: `#willDamageDateKnown${option}`};
-    await I.waitForEnabled(locator);
+    await I.waitForEnabled(locator, config.TestWaitForElementToAppear);
     await I.click(locator);
 
     if (option === '') {

test/end-to-end/pages/will/damagereason.js

@@ -1,12 +1,13 @@
 'use strict';
 
+const config = require('config');
 module.exports = async function(language = 'en', option = null, reason = null) {
     const I = this;
     const commonContent = require(`app/resources/${language}/translation/common`);
 
     await I.checkInUrl('/will-damage-reason');
     const locator = {css: `#willDamageReasonKnown${option}`};
-    await I.waitForEnabled(locator);
+    await I.waitForEnabled({css: `#willDamageReasonKnown${option}`}, config.TestWaitForElementToAppear);
     await I.click(locator);
 
     if (option === '') {

test/end-to-end/pages/will/willdamage.js

@@ -1,12 +1,13 @@
 'use strict';
 
-module.exports = async function(language = 'en', option = null, description = null) {
+const config = require('config');
+module.exports = async function(language = 'en', option, description = null) {
     const I = this;
     const commonContent = require(`app/resources/${language}/translation/common`);
 
     await I.checkInUrl('/will-has-damage');
     const locator = {css: `#willHasVisibleDamage${option}`};
-    await I.waitForEnabled(locator);
+    await I.waitForEnabled(locator, config.TestWaitForElementToAppear);
     await I.click(locator);
     if (option === '') {
         await I.click('#willDamageTypes');

test/end-to-end/paths/probate/gopSingleExecutor.en.test.js

@@ -22,10 +22,10 @@ After(async () => {
 });
 
 getTestLanguages().forEach(language => {
-
     Scenario(TestConfigurator.idamInUseText(`${language.toUpperCase()} -GOP Single Executor E2E `), async ({I}) => {
 
         const taskListContent = language === 'en' ? taskListContentEn : taskListContentCy;
+
         await I.retry(2).createAUser(TestConfigurator);
 
         // Eligibility Task (pre IdAM)