add svgomg, todomvc

.github/workflows/pipeline.yml

@@ -38,6 +38,94 @@ jobs:
           name: playwright-test-report
           path: ${{ env.TESTGROUP }}/playwright-report/
 
+      - name: Publish HTML report to testresults.marcusfelling.com
+        if: always()
+        uses: peaceiris/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ${{ env.TESTGROUP }}/playwright-report/
+          destination_dir: ${{ env.TESTGROUP }}
+          keep_files: true
+          user_name: 'github-actions[bot]'
+          user_email: 'github-actions[bot]@users.noreply.github.com'
+
+  todomvcTests:
+    name: "todomvc Tests"
+    timeout-minutes: 60
+    runs-on: ubuntu-20.04
+    container: mcr.microsoft.com/playwright:focal
+    env:
+      TESTGROUP:  todomvc
+    environment:
+      name: todomvc
+      url: https://testresults.marcusfelling.com/${{ env.TESTGROUP }}
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Install dependencies
+        run: | 
+          npm ci
+
+      - name: Run todomvc Tests        
+        continue-on-error: false
+        working-directory: ${{ env.TESTGROUP }}       
+        run: |   
+          HOME=/root npx playwright test
+
+      - name: Upload HTML report as artifact. To troubleshoot failures, extract .zip and double-click index.html.
+        uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-test-report
+          path: ${{ env.TESTGROUP }}/playwright-report/
+
+      - name: Publish HTML report to testresults.marcusfelling.com
+        if: always()
+        uses: peaceiris/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ${{ env.TESTGROUP }}/playwright-report/
+          destination_dir: ${{ env.TESTGROUP }}
+          keep_files: true
+          user_name: 'github-actions[bot]'
+          user_email: 'github-actions[bot]@users.noreply.github.com'
+
+  svgomgTests:
+    name: "svgomg Tests"
+    timeout-minutes: 60
+    runs-on: ubuntu-20.04
+    container: mcr.microsoft.com/playwright:focal
+    env:
+      TESTGROUP:  svgomg
+    environment:
+      name: svgomg
+      url: https://testresults.marcusfelling.com/${{ env.TESTGROUP }}
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Install dependencies
+        run: | 
+          npm ci
+
+      - name: Run svgomg Tests        
+        continue-on-error: false
+        working-directory: ${{ env.TESTGROUP }}       
+        run: |   
+          HOME=/root npx playwright test
+
+      - name: Upload HTML report as artifact. To troubleshoot failures, extract .zip and double-click index.html.
+        uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-test-report
+          path: ${{ env.TESTGROUP }}/playwright-report/
+
       - name: Publish HTML report to testresults.marcusfelling.com
         if: always()
         uses: peaceiris/[email protected]

README.md

@@ -3,8 +3,8 @@
 This repo is used to demo [Playwright's](https://playwright.dev/) capabilities. The project is leveraging the [Playwright Test](https://playwright.dev/docs/intro) test runner and tests authored in TypeScript.
 
 The [pipline.yml](.github/workflows/pipeline.yml) GitHub Action workflow is used to:
-1. Run Playwright example tests (basic, todomvc, svgomg)
+1. Run Playwright example tests ([basic](./basic), [todomvc](./todomvc), [svgomg](./svgomg))
 1. Publish each HTML report to their respective directory:
 - [testresults.marcusfelling.com/basic](https://testresults.marcusfelling.com/basic)
-- [testresults.marcusfelling.com/basic](https://testresults.marcusfelling.com/todomvc)
-- [testresults.marcusfelling.com/basic](https://testresults.marcusfelling.com/svgomg) 
+- [testresults.marcusfelling.com/todomvc](https://testresults.marcusfelling.com/todomvc)
+- [testresults.marcusfelling.com/svgomg](https://testresults.marcusfelling.com/svgomg) 

svgomg/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+test-results/
+playwright-report/
+package-lock.json

svgomg/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "svgomg-tests",
+  "version": "0.0.1",
+  "scripts": {
+    "test": "playwright test",
+    "ctest": "playwright test --project=chromium",
+    "ftest": "playwright test --project=firefox",
+    "wtest": "playwright test --project=webkit"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.17.1"
+  }
+}

svgomg/playwright.config.ts

@@ -0,0 +1,114 @@
+/* eslint-disable notice/notice */
+
+import { PlaywrightTestConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+
+  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: '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: 'http://localhost:3000',
+
+    /* 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: '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/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+export default config;

svgomg/tests/example.spec.ts

@@ -0,0 +1,105 @@
+/* eslint-disable notice/notice */
+
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('https://demo.playwright.dev/svgomg');
+});
+
+test('verify menu items', async ({ page }) => {
+  await expect(page.locator('.menu li')).toHaveText([
+    'Open SVG',
+    'Paste markup',
+    'Demo',
+    'Contribute'
+  ]);
+});
+
+test.describe('demo tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.locator('.menu-item >> text=Demo').click();
+  });
+
+  test('verify default global settings', async ({ page }) => {
+    const menuItems = page.locator('.settings-scroller .global .setting-item-toggle');
+    await expect(menuItems).toHaveText([
+      'Show original',
+      'Compare gzipped',
+      'Prettify markup',
+      'Multipass',
+    ]);
+
+    const toggle = page.locator('.setting-item-toggle');
+    await expect(toggle.locator('text=Show original')).not.toBeChecked();
+    await expect(toggle.locator('text=Compare gzipped')).toBeChecked();
+    await expect(toggle.locator('text=Prettify markup')).not.toBeChecked();
+    await expect(toggle.locator('text=Multipass')).not.toBeChecked();
+  });
+
+  test('verify default features', async ({ page }) => {
+    const enabledOptions = [
+      'Clean up attribute whitespace',
+      'Clean up IDs',
+      'Collapse useless groups',
+      'Convert non-eccentric <ellipse> to <circle>',
+      'Inline styles',
+    ];
+
+    const disabledOptions = [
+      'Prefer viewBox to width/height',
+      'Remove raster images',
+      'Remove script elements',
+      'Remove style elements',
+    ];
+
+    for (const option of enabledOptions) {
+      const locator = page.locator(`.setting-item-toggle >> text=${option}`);
+      await expect(locator).toBeChecked();
+    }
+
+    for (const option of disabledOptions) {
+      const locator = page.locator(`.setting-item-toggle >> text=${option}`);
+      await expect(locator).not.toBeChecked();
+    }
+  });
+
+  test('reset settings', async ({ page }) => {
+    const showOriginalSetting = page.locator('.setting-item-toggle >> text=Show original');
+    await showOriginalSetting.click();
+    await expect(showOriginalSetting).toBeChecked();
+    await page.locator('button >> text=Reset all').click();
+    await expect(showOriginalSetting).not.toBeChecked();
+  });
+
+  test('download result', async ({ page }) => {
+    const downloadButton = page.locator('a[title=Download]');
+    await expect(downloadButton).toHaveAttribute('href', /blob/);
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      downloadButton.click()
+    ]);
+    expect(download.suggestedFilename()).toBe('car-lite.svg');
+    const result = fs.readFileSync(await download.path(), 'utf-8');
+    expect(result).toContain('<svg');
+  });
+});
+
+test('open svg', async ({ page }) => {
+  // Start waiting for the file chooser, then click the button.
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.click('text=Open SVG'),
+  ]);
+
+  // Set file to the chooser.
+  await fileChooser.setFiles({
+    name: 'file.svg',
+    mimeType: 'image/svg+xml',
+    buffer: Buffer.from(`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>`)
+  });
+
+  // Verify provided svg was rendered.
+  const markup = await page.frameLocator('.svg-frame').locator('svg').evaluate(svg => svg.outerHTML);
+  expect(markup).toMatch(/<svg.*<\/svg>/);
+});

todomvc/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+test-results/
+playwright-report/
+package-lock.json

todomvc/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "todomvc-test",
+  "version": "0.0.1",
+  "scripts": {
+    "test": "playwright test",
+    "ctest": "playwright test --project=chromium",
+    "ftest": "playwright test --project=firefox",
+    "wtest": "playwright test --project=webkit"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.17.1"
+  }
+}