[e2e] Update Playwright config to include MMOC and Ipad (#4717)

Co-authored-by: unlikelyzero <jchill2@gmail.com>

.github/workflows/e2e-pr.yml

@@ -23,6 +23,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: '14'
+      - run: npx playwright install-deps
       - run: npm install
       - run: npm run test:e2e:full
       - name: Archive test results

.github/workflows/e2e-visual.yml

@@ -16,6 +16,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: '14'
+      - run: npx playwright install-deps
       - run: npm install
       - name: Run the e2e visual tests
         run: npm run test:e2e:visual

e2e/.percy.yml

@@ -0,0 +1,5 @@
+version: 2
+snapshot:
+  widths: [1024, 2000]
+  min-height: 1440 # px
+  

e2e/playwright-ci.config.js

@@ -2,6 +2,8 @@
 // playwright.config.js
 // @ts-check
 
+const { devices } = require('@playwright/test');
+
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
     retries: 2,
@@ -15,7 +17,6 @@ const config = {
     },
     workers: 2, //Limit to 2 for CircleCI Agent
     use: {
-        browserName: "chromium",
         baseURL: 'http://localhost:8080/',
         headless: true,
         ignoreHTTPSErrors: true,
@@ -23,10 +24,37 @@ const config = {
         trace: 'on',
         video: 'on'
     },
+    projects: [
+        {
+            name: 'chrome',
+            use: {
+                browserName: 'chromium',
+                ...devices['Desktop Chrome']
+            }
+        },
+        {
+            name: 'MMOC',
+            use: {
+                browserName: 'chromium',
+                viewport: {
+                    width: 2560,
+                    height: 1440
+                }
+            }
+        },
+        {
+            name: 'ipad',
+            use: {
+                browserName: 'webkit',
+                ...devices['iPad (gen 7) landscape'] // Complete List https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json
+            }
+        }
+    ],
     reporter: [
         ['list'],
         ['junit', { outputFile: 'test-results/results.xml' }],
-        ['allure-playwright']
+        ['allure-playwright'],
+        ['github']
     ]
 };
 

e2e/playwright-local.config.js

@@ -13,6 +13,7 @@ const config = {
         timeout: 120 * 1000,
         reuseExistingServer: !process.env.CI
     },
+    workers: 1,
     use: {
         browserName: "chromium",
         baseURL: 'http://localhost:8080/',

package.json

@@ -96,9 +96,9 @@
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
     "test:coverage": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" COVERAGE=true karma start --single-run",
     "test:coverage:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
-    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js smoke default condition.e2e",
+    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition.e2e",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js",
-    "test:e2e:visual": "percy exec -- npx playwright test --config=e2e/playwright-visual.config.js default",
+    "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js default",
     "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js",
     "test:watch": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
     "verify": "concurrently 'npm:test' 'npm:lint'",