update configs to use .env, format tests (#39)

* update configs to use .env, format tests

README.md

@@ -53,7 +53,7 @@ When the above tests are finished, the results are published to GitHub pages:
 
 ## Configuration
 
-The [baseURL](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) value for most tests is set as a [workflow environment variable](https://docs.github.com/en/actions/learn-github-actions/environment-variables). This allows flexibility for the URL of the sites tested. By not hardcoding a URL in `page.goTo('')` we can simply pass baseURL without changing the test script e.g. test.site.com -> stage.site.com -> prod.site.com
+The [baseURL](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) value for most tests is set via [.env file](https://github.com/motdotla/dotenv) that you'll find at the root of each folder. Typically this file is gitignored; by including it in this demo repo, it makes running and sharing these tests easier.
 
 ## Have a testing scenario you'd like to see included?
 

accessibility/.env

@@ -0,0 +1 @@
+BASEURL = 'https://playwright.dev/docs/accessibility-testing'

accessibility/playwright.config.ts

@@ -1,76 +1,44 @@
-import {PlaywrightTestConfig, devices} from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-const config: PlaywrightTestConfig = {
+require('dotenv').config()
 
+export default defineConfig({
   testDir: './tests',
-
-  /* Maximum time one test can run for. */
   timeout: 30 * 1000,
-
   expect: {
-
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
     timeout: 5000,
   },
-
-  /* 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: [
+    ['list'],
     ['html'],
   ],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-
-    /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: process.env.BASEURL,
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on',
-
     acceptDownloads: true,
   },
-
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-
-      /* Project-specific settings. */
       use: {
         ...devices['Desktop Chrome'],
       },
     },
-
     {
       name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
       },
     },
-
     {
       name: 'webkit',
       use: {
         ...devices['Desktop Safari'],
       },
     },
   ],
-};
-export default config;
+});

accessibility/tests/example.spec.ts

@@ -1,20 +1,19 @@
 import { test, expect } from '@playwright/test';
 import AxeBuilder from '@axe-core/playwright';
 
-test.describe.parallel('accessibility checks', () => {
+test.describe('accessibility checks', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('');
   });
-
-/**
- * This example demonstrates how to test an entire page for automatically detectable accessibility violations. 
- * @see https://playwright.dev/docs/accessibility-testing
- */
-test.describe('Scanning an entire page', () => {
+  /**
+   * This example demonstrates how to test an entire page for automatically detectable accessibility violations. 
+   * @see https://playwright.dev/docs/accessibility-testing
+   */
+  test.describe('Scanning an entire page', () => {
     test('should not have any automatically detectable accessibility issues', async ({ page }) => {
       const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
-
+      
       expect(accessibilityScanResults.violations).toEqual([]);
     });
-  });    
+  });
 });

android/playwright.config.ts

@@ -1,61 +1,23 @@
-import {PlaywrightTestConfig} from '@playwright/test';
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-const config: PlaywrightTestConfig = {
+import { defineConfig, devices } from '@playwright/test';
 
+export default defineConfig({
   testDir: './tests',
-
-  /* Maximum time one test can run for. */
   timeout: 60 * 1000,
-
   expect: {
-
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
     timeout: 5000,
   },
-
-  /* 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 ? 0 : 0,
-
-  /* Opt out of parallel tests on CI. */
+  retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [
+    ['list'],
     ['html'],
   ],
-
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-
-    /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: process.env.BASEURL,
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on',
-
     acceptDownloads: true,
   },
-
-
-  // Folder for test artifacts such as screenshots, videos, traces, etc. */
   outputDir: 'test-results/',
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   port: 3000,
-  // },
-};
-export default config;
+});

android/tests/example.spec.ts

@@ -17,15 +17,12 @@ test.describe('Run native Android tests', async () => {
     await device.shell('am start org.chromium.webview_shell/.WebViewBrowserActivity');
     // Get the WebView.
     const webview = await device.webView({pkg: 'org.chromium.webview_shell'});
-
     // Fill the input box.
     await device.fill({res: 'org.chromium.webview_shell:id/url_field'}, 'github.com/microsoft/playwright');
     await device.press({res: 'org.chromium.webview_shell:id/url_field'}, 'Enter');
-
     // Work with WebView's page as usual.
     const page = await webview.page();
     console.log(await page.title());
-
     // Close the device.
     await device.close();
   });

basic/playwright.config.ts

@@ -1,109 +1,57 @@
-import {PlaywrightTestConfig, devices} from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-const config: PlaywrightTestConfig = {
-
-  /* Maximum time one test can run for. */
+export default defineConfig({
   timeout: 30 * 1000,
-
   expect: {
-
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
     timeout: 5000,
   },
-
-  /* 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: [
+    ['list'],
     ['html'],
   ],
-
-  // 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: 'node ./server',
     port: 4345,
     cwd: __dirname,
   },
-
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on',
+    acceptDownloads: true,
   },
-
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-
-      /* Project-specific settings. */
       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: 'MobileSafari',
+      name: 'Mobile Safari',
       use: {
         ...devices['iPhone 12'],
       },
     },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: {
-    //     channel: 'msedge',
-    //   },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: {
-    //     channel: 'chrome',
-    //   },
-    // },
   ],
-
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/'
-};
-export default config;
+});

basic/pom/fixtures.ts

@@ -1,12 +1,12 @@
-import {test as base} from '@playwright/test';
-import {TodoPage} from './todoPage.pom';
+import { test as base } from '@playwright/test';
+import { TodoPage } from './todoPage.pom';
 
 /**
  * This adds a todoPage fixture which has access to the page instance
  * @see https://playwright.dev/docs/test-fixtures
  */
 export const test = base.extend<{ todoPage: TodoPage }>({
-  todoPage: async ({page}, use) => {
+  todoPage: async ({ page }, use) => {
     await use(new TodoPage(page));
   },
 });