init

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - run: npx testbeats@latest publish -c testbeats.config.json
+        if: always()
+        env:
+          TEST_BEATS_API_KEY: ${{ secrets.TEST_BEATS_API_KEY }}
+          SLACK_MVP_URL: ${{ secrets.SLACK_MVP_URL }}

.gitignore

@@ -128,3 +128,10 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+.DS_Store

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "testbeats"
+  ]
+}

README.md

@@ -1,2 +1,28 @@
 # example-playwright-testbeats
-example repo to showcase integration of playwright with testbeats
+
+Example repo to showcase integration of playwright with testbeats.
+
+## Installation
+
+```bash
+npm install
+npx playwright install
+```
+
+## Running Tests
+
+```bash
+npx playwright test
+```
+
+## Reporting Results
+
+```bash
+npx testbeats@latest publish -c testbeats.config.json
+```
+
+
+
+
+
+

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "example-playwright-testbeats",
+  "version": "1.0.0",
+  "description": "example repo to showcase integration of playwright with testbeats",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.44.0",
+    "@types/node": "^20.12.12"
+  }
+}

playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['list'],
+    ['junit', {  outputFile: 'test-results/junit.xml' }]
+  ],
+  use: {
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+});

test-results/.last-run.json

@@ -0,0 +1,7 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "a30a6eba6312f6b87ea5-274e97907a6e3638a22f",
+    "a30a6eba6312f6b87ea5-bfe080d6fe34297f494c"
+  ]
+}

test-results/junit.xml

@@ -0,0 +1,106 @@
+<testsuites id="" name="" tests="16" failures="2" skipped="0" errors="0" time="10.297842000000001">
+<testsuite name="demo-todo-app.spec.ts" timestamp="2024-05-21T13:09:23.747Z" hostname="chromium" tests="6" failures="0" skipped="0" time="6.586" errors="0">
+<testcase name="New Todo › should allow me to add todo items" classname="demo-todo-app.spec.ts" time="1.535">
+</testcase>
+<testcase name="New Todo › should clear text input field when an item is added" classname="demo-todo-app.spec.ts" time="0.611">
+</testcase>
+<testcase name="New Todo › should append new items to the bottom of the list" classname="demo-todo-app.spec.ts" time="0.655">
+</testcase>
+<testcase name="Mark all as completed › should allow me to mark all items as completed" classname="demo-todo-app.spec.ts" time="1.481">
+</testcase>
+<testcase name="Mark all as completed › should allow me to clear the complete state of all items" classname="demo-todo-app.spec.ts" time="1.012">
+</testcase>
+<testcase name="Mark all as completed › complete all checkbox should update state when items are completed / cleared" classname="demo-todo-app.spec.ts" time="1.292">
+</testcase>
+</testsuite>
+<testsuite name="example.spec.ts" timestamp="2024-05-21T13:09:23.747Z" hostname="chromium" tests="2" failures="1" skipped="0" time="5.908" errors="0">
+<testcase name="has title" classname="example.spec.ts" time="0.475">
+</testcase>
+<testcase name="get started link" classname="example.spec.ts" time="5.433">
+<failure message="example.spec.ts:10:5 get started link" type="FAILURE">
+<![CDATA[  [chromium] › example.spec.ts:10:5 › get started link ─────────────────────────────────────────────
+
+    Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
+
+    Locator: getByRole('heading', { name: 'Installations' })
+    Expected: visible
+    Received: <element(s) not found>
+    Call log:
+      - expect.toBeVisible with timeout 5000ms
+      - waiting for getByRole('heading', { name: 'Installations' })
+
+
+      15 |
+      16 |   // Expects page to have a heading with the name of Installation.
+    > 17 |   await expect(page.getByRole('heading', { name: 'Installations' })).toBeVisible();
+         |                                                                      ^
+      18 | });
+      19 |
+
+        at /Users/anudeep/Documents/my/repos/test-results-reporter/example-playwright-testbeats/tests/example.spec.ts:17:70
+
+    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+    test-results/example-get-started-link-chromium/test-failed-1.png
+    ────────────────────────────────────────────────────────────────────────────────────────────────
+]]>
+</failure>
+<system-out>
+<![CDATA[
+[[ATTACHMENT|example-get-started-link-chromium/test-failed-1.png]]
+]]>
+</system-out>
+</testcase>
+</testsuite>
+<testsuite name="demo-todo-app.spec.ts" timestamp="2024-05-21T13:09:23.747Z" hostname="firefox" tests="6" failures="0" skipped="0" time="6.809" errors="0">
+<testcase name="New Todo › should allow me to add todo items" classname="demo-todo-app.spec.ts" time="1.186">
+</testcase>
+<testcase name="New Todo › should clear text input field when an item is added" classname="demo-todo-app.spec.ts" time="1.06">
+</testcase>
+<testcase name="New Todo › should append new items to the bottom of the list" classname="demo-todo-app.spec.ts" time="1.194">
+</testcase>
+<testcase name="Mark all as completed › should allow me to mark all items as completed" classname="demo-todo-app.spec.ts" time="1.323">
+</testcase>
+<testcase name="Mark all as completed › should allow me to clear the complete state of all items" classname="demo-todo-app.spec.ts" time="1.314">
+</testcase>
+<testcase name="Mark all as completed › complete all checkbox should update state when items are completed / cleared" classname="demo-todo-app.spec.ts" time="0.732">
+</testcase>
+</testsuite>
+<testsuite name="example.spec.ts" timestamp="2024-05-21T13:09:23.747Z" hostname="firefox" tests="2" failures="1" skipped="0" time="6.131" errors="0">
+<testcase name="has title" classname="example.spec.ts" time="0.566">
+</testcase>
+<testcase name="get started link" classname="example.spec.ts" time="5.565">
+<failure message="example.spec.ts:10:5 get started link" type="FAILURE">
+<![CDATA[  [firefox] › example.spec.ts:10:5 › get started link ──────────────────────────────────────────────
+
+    Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
+
+    Locator: getByRole('heading', { name: 'Installations' })
+    Expected: visible
+    Received: <element(s) not found>
+    Call log:
+      - expect.toBeVisible with timeout 5000ms
+      - waiting for getByRole('heading', { name: 'Installations' })
+
+
+      15 |
+      16 |   // Expects page to have a heading with the name of Installation.
+    > 17 |   await expect(page.getByRole('heading', { name: 'Installations' })).toBeVisible();
+         |                                                                      ^
+      18 | });
+      19 |
+
+        at /Users/anudeep/Documents/my/repos/test-results-reporter/example-playwright-testbeats/tests/example.spec.ts:17:70
+
+    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+    test-results/example-get-started-link-firefox/test-failed-1.png
+    ────────────────────────────────────────────────────────────────────────────────────────────────
+]]>
+</failure>
+<system-out>
+<![CDATA[
+[[ATTACHMENT|example-get-started-link-firefox/test-failed-1.png]]
+]]>
+</system-out>
+</testcase>
+</testsuite>
+</testsuites>

testbeats.config.json

@@ -0,0 +1,29 @@
+{
+  "project": "example-playwright-testbeats",
+  "run": "E2E Tests",
+  "api_key": "{TEST_BEATS_API_KEY}",
+  "targets": [
+    {
+      "name": "slack",
+      "inputs": {
+        "url": "{SLACK_MVP_URL}",
+        "title": "example-playwright-testbeats - E2E Tests",
+        "only_failures": true
+      },
+      "extensions": [
+        {
+          "name": "quick-chart-test-summary"
+        },
+        {
+          "name": "ci-info"
+        }
+      ]
+    }
+  ],
+  "results": [
+    {
+      "type": "junit",
+      "files": ["test-results/junit.xml"]
+    }
+  ]
+}