test: playwright (#1242)

Change from codeceptjs to playwright as the snapshots are better.

.github/workflows/playwright.yml

@@ -0,0 +1,37 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+env:
+  IMGPROXY_KEY: ${{ secrets.IMGPROXY_KEY }}
+  IMGPROXY_SALT: ${{ secrets.IMGPROXY_SALT }}
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    # container:
+    #   image: mcr.microsoft.com/playwright:v1.40.0-jammy
+    # defaults:
+    #   run:
+    #     shell: bash
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Build
+      run: yarn build
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -104,3 +104,7 @@ sitemap.xml
 package-lock.json
 
 .unlighthouse
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/settings.json

@@ -13,7 +13,7 @@
     "**/.firebase/**": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "i18n-ally.localesPaths": [
     "lang"

imgproxy.ts

@@ -11,6 +11,7 @@ const hexDecode = (hex: string) => Buffer.from(hex, 'hex');
 
 const sign = (salt: string, target: string, secret: string) => {
   const msg = hexDecode(salt + Buffer.from(target).toString('hex')); // Uint8Array of arbitrary length
+  if (!msg.toString('hex')) return;
   const hmac = hmacSHA256(hex.parse(msg.toString('hex')), hex.parse(secret));
   const digest = hmac.toString(Base64url);
   return digest;

nuxt.config.ts

@@ -114,7 +114,9 @@ export default defineNuxtConfig({
   /*
    ** Global CSS
    */
-  css: ['vuetify/lib/styles/main.sass'],
+  css: [
+    // 'vuetify/lib/styles/main.sass'
+  ],
 
   /*
    ** Nuxt.js modules
@@ -155,6 +157,11 @@ export default defineNuxtConfig({
 
   unocss: {
     typography: true,
+    webFonts: {
+      fonts: {
+        sans: 'Roboto',
+      },
+    },
   },
 
   content: {
@@ -216,12 +223,12 @@ export default defineNuxtConfig({
     hostname: env.BASE_URL,
   },
 
-  vuetify: {
-    optionsPath: './vuetify.options.js',
-    customVariables: ['~/assets/scss/vuetify.scss'],
-    treeShake: true,
-    defaultAssets: false,
-  },
+  // vuetify: {
+  //   optionsPath: './vuetify.options.js',
+  //   customVariables: ['~/assets/scss/vuetify.scss'],
+  //   treeShake: true,
+  //   defaultAssets: false,
+  // },
 
   eslint: {
     cache: true,

package.json

@@ -34,9 +34,8 @@
     "serve:lhci": "cross-env PORT=3001 nuxi preview",
     "images": "ts-node fetch-external-images.ts",
     "icons": "ts-node generate-iconify.ts",
-    "test": "codeceptjs run --steps",
-    "test:e2e": "codeceptjs run --steps",
-    "update:snapshots": "rsync -a ./test/e2e/output/ ./test/e2e/screenshots/base",
+    "test": "playwright test",
+    "test:e2e": "yarn run test",
     "postinstall": "nuxi prepare"
   },
   "engines": {
@@ -64,26 +63,26 @@
     "@kevinmarrec/nuxt-pwa": "0.17.0",
     "@lhci/cli": "0.11.0",
     "@mdi/js": "5.9.55",
-    "@nuxt/image": "latest",
+    "@nuxt/image": "1.1.0",
     "@nuxt/types": "2.15.8",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
     "@nuxtjs/eslint-module": "4.1.0",
     "@nuxtjs/i18n": "8.0.0-rc.6",
+    "@playwright/test": "1.40.1",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.1",
     "@types/crypto-js": "4.1.1",
     "@types/csso": "5.0.0",
     "@types/lodash": "4.14.191",
     "@types/lodash-es": "4.17.6",
+    "@types/node": "20.10.4",
     "@types/sharp": "0.31.0",
     "@typescript-eslint/eslint-plugin": "5.47.0",
     "@typescript-eslint/parser": "5.56.0",
     "@unlighthouse/cli": "0.4.9",
     "@unlighthouse/nuxt": "0.4.9",
     "@unocss/nuxt": "0.51.4",
     "@vite-pwa/nuxt": "0.0.7",
-    "codeceptjs": "3.1.2",
-    "codeceptjs-resemblehelper": "1.9.6",
     "cspell": "5.9.0",
     "eslint": "8.55.0",
     "eslint-config-prettier": "8.8.0",
@@ -101,7 +100,7 @@
     "nuxt-schema-org": "2.1.2",
     "nuxt-security": "0.13.0",
     "nuxt-unhead": "1.4.15",
-    "playwright": "1.30.0",
+    "playwright": "1.40.1",
     "prettier": "2.8.6",
     "puppeteer": "19.7.5",
     "remark-cli": "11.0.0",
@@ -116,7 +115,6 @@
     "require-extension-hooks-vue": "3.0.0",
     "sass": "1.59.3",
     "semantic-release": "20.1.3",
-    "serve-handler": "6.1.5",
     "sharp": "0.32.0",
     "svgo": "3.0.2",
     "ts-node": "10.9.1",

playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run start',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

plugins/vuetify.ts

@@ -1,4 +1,4 @@
-// plugins/vuetify.js
+import 'vuetify/styles';
 import { createVuetify } from 'vuetify';
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
 

tests/snapshot.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test';
+
+const pages = [
+  { slug: 'home', route: '/' },
+  { slug: 'blog', heading: 'Articles' },
+  { slug: 'contact', heading: 'Contact' },
+  { slug: 'tools', heading: 'Tools' },
+  { slug: 'portfolio', heading: 'Portfolio' },
+  { slug: 'people', heading: 'Team' },
+  { slug: 'alternatives', heading: 'Alternatives' },
+  { slug: 'services', heading: 'Services' },
+  // { slug: 'about', heading: 'ABOUT' },
+  { slug: '404', heading: '404' },
+  // { slug: 'search', heading: 'SEARCH' },
+  // { slug: 'privacy', heading: 'PRIVACY' },
+  // { slug: 'terms', heading: 'TERMS' },
+  // { slug: 'sitemap', route: '/sitemap.xml' },
+  // { slug: 'robots', route: '/robots.txt' },
+];
+
+for (const { slug, heading, route } of pages) {
+  test(slug, async ({ page }) => {
+    await page.goto(route || `/${slug}`);
+
+    if (heading) {
+      await expect(
+        page.getByRole('heading', { name: heading, exact: true }),
+      ).toBeVisible();
+    }
+
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
+  });
+}