feat: new playwright config

wayofdev · Jul 15, 2023 · d535027 · d535027
1 parent df37af9
commit d535027
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 63 deletions.
diff --git a/apps/web/playwright.config.old.ts b/apps/web/playwright.config.old.ts
@@ -0,0 +1,109 @@
+import path from 'path'
+import { loadEnvConfig } from '@next/env'
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
+import pc from 'picocolors'
+
+const isCI = ['true', '1'].includes(process.env?.CI ?? '')
+const openBrowserReport = process.env?.PLAYWRIGHT_OPEN_BROWSER_REPORT ?? 'never'
+const outputDir = path.join(__dirname, 'e2e/.out')
+
+// Use process.env.PORT by default and fallback to port 3000
+const port = process.env.PORT || 3000
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${port}`
+
+function getNextJsEnv(): Record<string, string> {
+  const { combinedEnv, loadedEnvFiles } = loadEnvConfig(__dirname)
+  loadedEnvFiles.forEach(file => {
+    console.log(`${pc.green('notice')}- Loaded nextjs environment file: './${file.path}'`)
+  })
+  return Object.keys(combinedEnv).reduce<Record<string, string>>((acc, key) => {
+    const v = combinedEnv[key]
+    if (v !== undefined) acc[key] = v
+    return acc
+  }, {})
+}
+
+// Reference: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+  // Timeout per test
+  timeout: 30 * 1000,
+  // Test directory
+  testDir: path.join(__dirname, 'e2e'),
+  // If a test fails, retry it additional 2 times
+  retries: 2,
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: `${outputDir}/output`,
+  preserveOutput: 'always',
+
+  /* Opt out of parallel tests on CI. */
+  workers: isCI ? 1 : undefined,
+
+  reporter: [
+    isCI ? ['github'] : ['list'],
+    [
+      'json',
+      {
+        outputFile: `${outputDir}/reports/test-results.json`,
+      },
+    ],
+    [
+      'html',
+      {
+        outputFolder: `${outputDir}/reports/html`,
+        open: isCI ? 'never' : openBrowserReport,
+      },
+    ],
+  ],
+
+  // Run your local dev server before starting the tests:
+  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  webServer: {
+    command: 'NEXT_IGNORE_TYPE_CHECKS=1 pnpm --filter=web build && pnpm --filter=web start',
+    url: baseURL,
+    timeout: 60 * 1000,
+    reuseExistingServer: !isCI,
+    env: getNextJsEnv(),
+  },
+
+  use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
+
+    // Retry a test if it's failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: 'retry-with-trace',
+
+    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+    contextOptions: {
+      ignoreHTTPSErrors: true,
+    },
+  },
+
+  projects: [
+    {
+      name: 'Desktop Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: {
+        ...devices['Pixel 5'],
+      },
+    },
+    ...(isCI
+      ? []
+      : [
+          {
+            name: 'Mobile Safari',
+            use: devices['iPhone 12'],
+          },
+        ]),
+  ],
+}
+export default config
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
@@ -1,83 +1,42 @@
-import path from 'path'
-import { loadEnvConfig } from '@next/env'
+// @ts-check
+
 import type { PlaywrightTestConfig } from '@playwright/test'
 import { devices } from '@playwright/test'
-import pc from 'picocolors'
 
 const isCI = ['true', '1'].includes(process.env?.CI ?? '')
-const openBrowserReport = process.env?.PLAYWRIGHT_OPEN_BROWSER_REPORT ?? 'never'
-const outputDir = path.join(__dirname, 'e2e/.out')
-
-// Use process.env.PORT by default and fallback to port 3000
-const port = process.env.PORT || 3000
 
-// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
-const baseURL = `http://localhost:${port}`
-
-function getNextJsEnv(): Record<string, string> {
-  const { combinedEnv, loadedEnvFiles } = loadEnvConfig(__dirname)
-  loadedEnvFiles.forEach(file => {
-    console.log(`${pc.green('notice')}- Loaded nextjs environment file: './${file.path}'`)
-  })
-  return Object.keys(combinedEnv).reduce<Record<string, string>>((acc, key) => {
-    const v = combinedEnv[key]
-    if (v !== undefined) acc[key] = v
-    return acc
-  }, {})
-}
+const outputDir = new URL('./e2e/.out', import.meta.url).pathname
+const testDir = new URL('e2e', import.meta.url).pathname
 
 // Reference: https://playwright.dev/docs/test-configuration
 const config: PlaywrightTestConfig = {
-  // Timeout per test
-  timeout: 30 * 1000,
-  // Test directory
-  testDir: path.join(__dirname, 'e2e'),
-  // If a test fails, retry it additional 2 times
-  retries: 2,
+  testDir: testDir,
+  timeout: 6_000,
+  /* Maximum time one test can run for. */
+  /* Opt out of parallel tests on CI. */
+  // workers: process.env.CI ? 1 : undefined,
   // Artifacts folder where screenshots, videos, and traces are stored.
-  outputDir: `${outputDir}/output`,
+  outputDir: `./output`,
   preserveOutput: 'always',
-
-  /* Opt out of parallel tests on CI. */
-  workers: isCI ? 1 : undefined,
-
   reporter: [
     isCI ? ['github'] : ['list'],
-    [
-      'json',
-      {
-        outputFile: `${outputDir}/reports/test-results.json`,
-      },
-    ],
+    ['json', { outputFile: `${outputDir}/reports/test-results.json` }],
     [
       'html',
       {
         outputFolder: `${outputDir}/reports/html`,
-        open: isCI ? 'never' : openBrowserReport,
+        open: isCI ? 'never' : 'on-failure',
       },
     ],
   ],
 
-  // Run your local dev server before starting the tests:
-  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
-  webServer: {
-    command: 'NEXT_IGNORE_TYPE_CHECKS=1 pnpm --filter=web build && pnpm --filter=web start',
-    url: baseURL,
-    timeout: 60 * 1000,
-    reuseExistingServer: !isCI,
-    env: getNextJsEnv(),
-  },
-
   use: {
-    // Use baseURL so to make navigations relative.
-    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
-    baseURL,
-
+    baseURL: 'http://localhost:3000',
+    headless: true,
     // Retry a test if it's failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
     // More information: https://playwright.dev/docs/trace-viewer
     trace: 'retry-with-trace',
 
-    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
     contextOptions: {
       ignoreHTTPSErrors: true,
     },
@@ -90,20 +49,30 @@ const config: PlaywrightTestConfig = {
         ...devices['Desktop Chrome'],
       },
     },
+    // {
+    //  name: 'Desktop Firefox',
+    //  use: {
+    //    ...devices['Desktop Firefox'],
+    //  },
+    // },
+    // {
+    //  name: 'Desktop Safari',
+    //  use: {
+    //    ...devices['Desktop Safari'],
+    //  },
+    // },
+    // Test against mobile viewports.
     {
       name: 'Mobile Chrome',
       use: {
         ...devices['Pixel 5'],
       },
     },
-    ...(isCI
-      ? []
-      : [
-          {
-            name: 'Mobile Safari',
-            use: devices['iPhone 12'],
-          },
-        ]),
+    // Mobile Safari is not supported on CI/Linux yet.
+    // {
+    //  name: 'Mobile Safari',
+    //  use: devices['iPhone 12'],
+    // },
   ],
 }
 export default config