Playwright tests (#2254)

* Add Playwright tests with image comparison for profile page
---------

Co-authored-by: Farhad Alizada <falizada@microsoft.com>

Author: f-alizada

.github/workflows/test.yml

@@ -20,7 +20,7 @@ jobs:
         run: npm run test
 
   end2end-tests:
-    runs-on: ubuntu-latest
+    runs-on: windows-latest
 
     steps:      
       - name: Checkout code
@@ -32,16 +32,29 @@ jobs:
       - name: Install
         run: npm install
 
+      - name: Compile
+        run: npx tsc -p tests\tsconfig.json
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
       - name: Build static data
         run: npm run build-mock-static-data
 
       - name: Start mock server
         run: npm run serve-website &
+        shell: bash
 
       - name: Wait for the server
         run: ./.github/scripts/wait-for-server.ps1 -HostName "http://localhost:8080"
         shell: pwsh
 
       - name: Run tests
-        run: npm run test-e2e
-      
+        run: npx playwright test tests/ --workers 1
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: playwright-report
+          path: test-results/
+          retention-days: 30

.gitignore

@@ -7,4 +7,5 @@ node_modules/
 src/config.design.json
 src/config.publish.json
 src/config.runtime.json
-
+test-results/
+tsconfig.tsbuildinfo

package-lock.json

@@ -17,7 +17,6 @@
         "build-publisher": "webpack --config webpack.publisher.js",
         "build-runtime": "webpack --config webpack.runtime.js",
         "build-function": "webpack --config webpack.function.js",
-        "test-e2e": "node node_modules/mocha/bin/_mocha -r mocha.js tests/e2e/**/*.spec.ts --timeout 3000000",
         "test": "node node_modules/mocha/bin/_mocha -r mocha.js src/**/*.spec.ts",
         "deploy-function": "npm run build-function && cd dist/function && func azure functionapp publish < function app name >",
         "publish": "webpack --config webpack.publisher.js && node dist/publisher/index.js && npm run serve-website",
@@ -38,7 +37,6 @@
         "@types/mime": "^3.0.1",
         "@types/mocha": "10.0.1",
         "@types/node": "^20.3.1",
-        "@types/puppeteer": "5.4.7",
         "@typescript-eslint/eslint-plugin": "^5.60.0",
         "@typescript-eslint/parser": "^5.60.0",
         "autoprefixer": "^10.4.14",
@@ -54,7 +52,6 @@
         "mocha": "^10.2.0",
         "path": "^0.12.7",
         "postcss-loader": "^7.3.3",
-        "puppeteer": "19.7.5",
         "querystring-es3": "^0.2.1",
         "raw-loader": "^4.0.2",
         "sass": "^1.63.6",
@@ -65,11 +62,12 @@
         "ts-loader": "^9.4.3",
         "ts-node": "10.9.1",
         "typescript": "^4.9.5",
-        "url-loader": "^4.1.1",
         "webpack": "5.88.0",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "4.15.1",
-        "webpack-merge": "5.9.0"
+        "webpack-merge": "5.9.0",
+        "playwright": "1.35.1",
+        "@playwright/test": "1.35.1"
     },
     "dependencies": {
         "@azure/api-management-custom-widgets-scaffolder": "^1.0.0-beta.2",

package.json

@@ -0,0 +1,8 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  retries: 2,
+  use: {
+    video: 'retain-on-failure'
+  }
+});

playwright.config.ts

@@ -1,5 +1,6 @@
 {
     "environment": "validation",
+    "isLocalRun": true,
     "root": "http://localhost:8080",
     "urls": {
         "home": "/",

src/config.validate.json

@@ -255,7 +255,6 @@ export class UsersService {
      */
     public async ensureSignedIn(): Promise<string> {
         const userId = await this.getCurrentUserId();
-
         if (!userId) {
             this.navigateToSignin();
             return; // intentionally exiting without resolving the promise.

src/services/usersService.ts

@@ -1,10 +1,15 @@
-import { Page } from "puppeteer";
+import { Page } from "playwright";
 
 export class ApisWidget {
     constructor(private readonly page: Page) { }
 
-    public async apis(): Promise<void> {
-        await this.page.waitForSelector("api-list div.table div.table-body div.table-row");
+    public async waitRuntimeInit(): Promise<void> {
+        await this.page.locator("api-list").waitFor();
+        
+    }
+
+    public async getApiByName(apiName: string): Promise<string | null> {
+        return await this.page.locator('api-list div.table div.table-body div.table-row a').filter({ hasText: apiName }).first().innerText();
     }
 
     public async getApisCount(): Promise<number | undefined> {

tests/constants.ts

@@ -0,0 +1,13 @@
+import { Locator, Page } from "playwright";
+
+export class HomePageWidget {
+    constructor(private readonly page: Page) { }
+
+    public async waitRuntimeInit(): Promise<void> {
+        await this.getWelcomeMessageLocator().waitFor();
+    }
+
+    public getWelcomeMessageLocator(): Locator {
+        return this.page.locator("h1 span").filter({ hasText: "Welcome to Contoso!" });
+    }
+}