feat(e2e): switching to playwright (#1720)

* Switching to playwright

* some screenshots

* Updated screenshots and command to run in docker

* prebuild demo app to warm up cache

---------

Co-authored-by: Dmitriy Shekhovtsov <[email protected]>

.github/workflows/ci.yml

@@ -18,14 +18,13 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: npm
-          node-version: 18.17.0
+          node-version: 18
       - run: npm ci
 
       - run: npm run lint
       - run: npm run build:lib
       - run: npm run build:schematics
       - run: npm run test:ci
       - run: npm run test:schematics
-      - run: |
-          npx cypress install
-          npm run e2e:ci
+      - run: npm run build:prod
+      - run: npm run e2e

apps/ng2-charts-demo/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": ["plugin:playwright/recommended", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
@@ -31,6 +31,10 @@
       "files": ["*.html"],
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
+    },
+    {
+      "files": ["e2e/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
     }
   ]
 }

apps/ng2-charts-demo/e2e/ng2-charts.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+
+test(`navigate to main Demo page and check info`, async ({ page }) => {
+  const topBarSelector = "mat-toolbar";
+  const mainContentSelector = "main";
+  await page.goto("/");
+
+  // wait for animations to finish
+  await expect(page.locator(topBarSelector)).toBeVisible();
+
+  await expect(page.locator(topBarSelector)).toHaveScreenshot();
+
+  return expect(page.locator(mainContentSelector)).toBeVisible();
+});
+
+const componentsArray = [
+  { url: "/#LineChart", selector: "app-line-chart" },
+  { url: "/#BarChart", selector: "app-bar-chart" },
+  { url: "/#DoughnutChart", selector: "app-doughnut-chart" },
+  { url: "/#RadarChart", selector: "app-radar-chart" },
+  { url: "/#PieChart", selector: "app-pie-chart" },
+  { url: "/#PolarAreaChart", selector: "app-polar-area-chart" },
+  { url: "/#BubbleChart", selector: "app-bubble-chart" },
+  { url: "/#ScatterChart", selector: "app-scatter-chart" },
+  { url: "/#DynamicChart", selector: "app-dynamic-chart" }
+];
+
+componentsArray.forEach((component) => {
+  test(`${component.selector}`, async ({ page }) => {
+    await page.goto(component.url);
+    // wait for animations to finish
+    await expect(page.locator(component.selector)
+      .locator("canvas"))
+      .toBeVisible();
+
+    return expect(page.locator(component.selector).locator("canvas")).toHaveScreenshot();
+  });
+});

apps/ng2-charts-demo/playwright.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig, devices } from "@playwright/test";
+import { nxE2EPreset } from "@nx/playwright/preset";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { workspaceRoot } from "@nx/devkit";
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env["BASE_URL"] || "http://localhost:4200";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: "./e2e" }),
+  projects: [{
+    name: "chromium",
+    use: { ...devices["Desktop Chrome"] }
+  }],
+  webServer: {
+    command: "nx serve-static",
+    url: baseURL,
+    reuseExistingServer: !process.env.CI
+  },
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry"
+  }
+});

apps/ng2-charts-demo/project.json

@@ -96,6 +96,21 @@
       "options": {
         "buildTarget": "ng2-charts-demo:build"
       }
+    },
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/apps/ng2-charts-demo"],
+      "options": {
+        "config": "apps/ng2-charts-demo/playwright.config.ts"
+      },
+      "configurations": {
+        "update-snapshots": {
+          "options": {
+            "skipInstall": true,
+            "updateSnapshots": "all"
+          }
+        }
+      }
     }
   },
   "implicitDependencies": ["ng2-charts"]

apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.ts

@@ -13,7 +13,6 @@ export class BarChartComponent {
   @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
 
   public barChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
     // We use these empty structures as placeholders for dynamic theming.
     scales: {
       x: {},

apps/ng2-charts-demo/src/app/financial-chart/financial-chart.component.ts

@@ -29,7 +29,6 @@ export class FinancialChartComponent {
   };
 
   public financialChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
     animation: false,
     maintainAspectRatio: false,
     scales: {

apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.ts

@@ -13,7 +13,6 @@ export class PieChartComponent {
 
   // Pie
   public pieChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
     plugins: {
       legend: {
         display: true,

apps/ng2-charts-demo/src/app/radar-chart/radar-chart.component.ts

@@ -8,9 +8,7 @@ import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
 })
 export class RadarChartComponent {
   // Radar
-  public radarChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
-  };
+  public radarChartOptions: ChartConfiguration['options'] = {};
   public radarChartLabels: string[] = [
     'Eating',
     'Drinking',

apps/ng2-charts-demo/src/app/scatter-chart/scatter-chart.component.ts

@@ -8,9 +8,7 @@ import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
 })
 export class ScatterChartComponent {
   // scatter
-  public scatterChartOptions: ChartConfiguration['options'] = {
-    responsive: true,
-  };
+  public scatterChartOptions: ChartConfiguration['options'] = {};
   public scatterChartLabels: string[] = [
     'Eating',
     'Drinking',