Migrate from Protractor and Pupeteer to Playwright #8336

PowerKiKi · PowerKiKi · commit 00c6eb0a8b2c · 2022-01-06T15:00:50.000+01:00
Protractor is EOL, and Playwright can replace entirely Pupeteer (for
our usage for Karma). This simplify a bit the maintenance since we
can install system deps automatically, and we are sure that everything
is always synced.

For now we only test on Chromium, because that's what we always did, but
we could also test other browsers later.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -30,6 +30,7 @@ jobs:
             - run: ./node_modules/.bin/ng test natural --progress false --watch=false --browsers ChromeHeadlessCustom
             - run: ./node_modules/.bin/ng test natural-editor --progress false --watch=false --browsers ChromeHeadlessCustom
             - run: ./node_modules/.bin/ng test demo --progress false --watch=false --browsers ChromeHeadlessCustom
+            - run: yarn e2e
 
     lint:
         runs-on: ubuntu-latest
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 # compiled output
 /dist
 /tmp
+/logs/
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
diff --git a/angular.json b/angular.json
@@ -101,21 +101,6 @@
                         "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
                         "exclude": ["**/node_modules/**"]
                     }
-                },
-                "e2e": {
-                    "builder": "@angular-devkit/build-angular:protractor",
-                    "options": {
-                        "protractorConfig": "e2e/protractor.conf.js"
-                    },
-                    "configurations": {
-                        "production": {
-                            "devServerTarget": "demo:serve:production"
-                        },
-                        "development": {
-                            "devServerTarget": "demo:serve:development"
-                        }
-                    },
-                    "defaultConfiguration": "development"
                 }
             }
         },
diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js
diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts
diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts
@@ -1,11 +1,9 @@
-import {browser, by, element} from 'protractor';
+import {Page} from '@playwright/test';
 
 export class AppPage {
-    public navigateTo(): Promise<any> {
-        return browser.get(browser.baseUrl) as Promise<any>;
-    }
+    constructor(private readonly page: Page) {}
 
     public getTitleText(): Promise<string> {
-        return element(by.css('app-root h1')).getText() as Promise<string>;
+        return this.page.innerText('app-root h1');
     }
 }
diff --git a/e2e/src/app.spec.ts b/e2e/src/app.spec.ts
@@ -0,0 +1,18 @@
+import {expect, test} from '@playwright/test';
+
+import {AppPage} from './app.po';
+
+test.describe('workspace-project App', () => {
+    let app: AppPage;
+
+    test.describe('as anonymous', () => {
+        test.beforeEach(async ({page}) => {
+            app = new AppPage(page);
+        });
+
+        test('should display welcome message', async ({page}) => {
+            await page.goto('/');
+            expect(await app.getTitleText()).toEqual('@ecodev/natural');
+        });
+    });
+});
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
@@ -1,9 +1,3 @@
 {
-    "extends": "../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "../out-tsc/e2e",
-        "module": "commonjs",
-        "target": "es2018",
-        "types": ["jasmine", "jasminewd2", "node"]
-    }
+    "extends": "../tsconfig.json"
 }
diff --git a/karma.conf.js b/karma.conf.js
@@ -1,8 +1,8 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-// Use puppeteer to control a headless Chrome
-process.env.CHROME_BIN = require('puppeteer').executablePath();
+// Use Playwright Chromium
+process.env.CHROME_BIN = require('@playwright/test').chromium.executablePath();
 
 module.exports = function (config) {
     config.set({
diff --git a/package.json b/package.json
@@ -4,12 +4,13 @@
     "license": "MIT",
     "scripts": {
         "ng": "ng",
+        "postinstall": "playwright install chromium",
         "dev": "ln -fs ../../bin/pre-commit.sh .git/hooks/pre-commit && ng serve",
         "test-natural": "ng test natural",
         "test-natural-editor": "ng test natural-editor",
         "test-demo": "ng test demo",
         "lint": "ng lint",
-        "e2e": "ng e2e",
+        "e2e": "playwright test",
         "build-lib": "yarn build-natural && yarn build-natural-editor",
         "build-natural": "ng build natural && cp -rv README.md dist/natural/ && cd dist/natural && yarn version --no-git-tag-version --new-version `git describe --tags --always`",
         "build-natural-editor": "ng build natural-editor && cd dist/natural-editor && yarn version --no-git-tag-version --new-version `git describe --tags --always`",
@@ -56,6 +57,7 @@
         "@angular/cli": "^12.2.9",
         "@angular/compiler-cli": "^12.2.9",
         "@angular/language-service": "^12.2.9",
+        "@playwright/test": "^1.17.1",
         "@types/jasmine": "~3.9.1",
         "@types/jasminewd2": "^2.0.10",
         "@types/lodash-es": "^4.17.5",
@@ -78,8 +80,6 @@
         "karma-jasmine-html-reporter": "^1.7.0",
         "ng-packagr": "^12.2.2",
         "prettier": "2.4.1",
-        "protractor": "~7.0.0",
-        "puppeteer": "^12.0.1",
         "ts-node": "^10.2.1",
         "tslint": "~6.1.0",
         "typescript": "~4.3.5"
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,28 @@
+import {PlaywrightTestConfig} from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+    testDir: './e2e/',
+    outputDir: __dirname + '/logs/tests/e2e/',
+    use: {
+        baseURL: process.env.E2E_BASE_URL ?? 'http://localhost:4201/',
+        headless: true,
+        viewport: {width: 1280, height: 720},
+        ignoreHTTPSErrors: true,
+        screenshot: 'on',
+        video: {
+            mode: 'on',
+            size: {
+                width: 1280,
+                height: 720,
+            },
+        },
+    },
+    webServer: {
+        command: 'yarn dev',
+        port: 4201,
+        timeout: 120 * 1000,
+        reuseExistingServer: !process.env.CI,
+    },
+};
+
+export default config;
diff --git a/projects/natural-editor/karma.conf.js b/projects/natural-editor/karma.conf.js
@@ -1,8 +1,8 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-// Use puppeteer to control a headless Chrome
-process.env.CHROME_BIN = require('puppeteer').executablePath();
+// Use Playwright Chromium
+process.env.CHROME_BIN = require('@playwright/test').chromium.executablePath();
 
 module.exports = function (config) {
     config.set({
diff --git a/projects/natural/karma.conf.js b/projects/natural/karma.conf.js
@@ -1,8 +1,8 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-// Use puppeteer to control a headless Chrome
-process.env.CHROME_BIN = require('puppeteer').executablePath();
+// Use Playwright Chromium
+process.env.CHROME_BIN = require('@playwright/test').chromium.executablePath();
 
 module.exports = function (config) {
     config.set({
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,9 @@`
`1`		`-import {browser, by, element} from 'protractor';`
	`1`	`+import {Page} from '@playwright/test';`
`2`	`2`
`3`	`3`	`export class AppPage {`
`4`		`- public navigateTo(): Promise<any> {`
`5`		`- return browser.get(browser.baseUrl) as Promise<any>;`
`6`		`- }`
	`4`	`+ constructor(private readonly page: Page) {}`
`7`	`5`
`8`	`6`	`public getTitleText(): Promise<string> {`
`9`		`- return element(by.css('app-root h1')).getText() as Promise<string>;`
	`7`	`+ return this.page.innerText('app-root h1');`
`10`	`8`	`}`
`11`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,3 @@`
`1`	`1`	`{`
`2`		`- "extends": "../tsconfig.json",`
`3`		`- "compilerOptions": {`
`4`		`- "outDir": "../out-tsc/e2e",`
`5`		`- "module": "commonjs",`
`6`		`- "target": "es2018",`
`7`		`- "types": ["jasmine", "jasminewd2", "node"]`
`8`		`- }`
	`2`	`+ "extends": "../tsconfig.json"`
`9`	`3`	`}`