feat: Improve first playwright tests

Author: timonback

.github/workflows/build-on-pull-request.yml

@@ -24,11 +24,9 @@ jobs:
         run: ./gradlew build
 
 # prepare ui test
-      - name: Install Playwright Browsers
+      - name: Install Playwright E2E Browsers
         run: npx playwright install --with-deps
 
-      - name: Start application in the background
-        run: ./gradlew npm_run_start &
 # run ui tests
       - name: E2E
         run: ./gradlew npm_run_e2e

README.md

@@ -30,12 +30,13 @@ To update the mock data, run `npm run update-mocks`.
 ## E2E tests
 
 E2E tests are written with [playwright](https://playwright.dev).
-To run them:
-1. start the development server with `npm run start`
-2. run the tests with `npm run test`
+
+Execute them with: `npm run test`
+(This starts the angular dev server in the background as defined in `playwright.config.ts` in the `webServer` section)
 
 During development of test you might find the codegen feature useful:
 `npx playwright codegen localhost:4200`
+(This assumes that the angular dev server is running `npm run start`)
 
 ## Release
 

playwright.config.ts

@@ -36,7 +36,7 @@ const config: PlaywrightTestConfig = {
     /* 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',
+    baseURL: 'http://localhost:4200/',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -97,11 +97,11 @@ const config: PlaywrightTestConfig = {
   /* 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,
-  // },
+  /* Run your local dev server before starting the tests. Comment out if you have a server already running. */
+  webServer: {
+    command: 'npm run start',
+    port: 4200,
+  },
 };
 
 export default config;

tests/channel.test.ts

@@ -1,30 +1,57 @@
 import { test, expect } from '@playwright/test';
 import asyncApiJson from '../src/app/shared/mock/mock.springwolf-kafka-example.json'
 
-test.describe('Channel', ()=> {
+test.describe('Channel section', ()=> {
   test.beforeEach(async ({ page }, testInfo) => {
-    console.log(`Running ${testInfo.title}`);
-    await page.goto('http://localhost:4200/');
+    await page.goto('/');
   });
 
-  test('first collapsible is rendered', async ({ page }) => {
+  test('clicking on channel updates the url', async ({ page }) => {
+    // when
     await page.locator("#channel-kafka-another-topic-publish-AnotherPayloadDto").click()
+
+    // then
     await expect(page).toHaveURL('http://localhost:4200/#channel-kafka-another-topic-publish-AnotherPayloadDto');
+  })
+
+  test('(first) channel example tab is rendered', async ({ page }) => {
+    // when
+    await page.locator("#channel-kafka-another-topic-publish-AnotherPayloadDto").click()
 
+    // then
+    await page.getByRole('tab', { name: 'Example' }).getByText('Example').click();
     await expect(page.getByRole('tabpanel', { name: 'Example' }).locator('textarea'))
       .toHaveValue(JSON.stringify(asyncApiJson.components.schemas.AnotherPayloadDto.example, null, 2))
+  });
+
+  test('(first) channel schema tab is rendered', async ({ page }) => {
+    // when
+    await page.locator("#channel-kafka-another-topic-publish-AnotherPayloadDto").click()
 
+    // then
     await page.getByRole('tab', { name: 'Schema' }).getByText('Schema').click();
     await page.getByRole('heading', { name: 'AnotherPayloadDto #/components/schemas/AnotherPayloadDto' }).click();
     await page.getByRole('cell', { name: 'string Foo field example: "bar"' }).getByText('string').click();
     await page.getByRole('cell', { name: 'string Foo field example: "bar"' }).getByText('Foo field').click();
     await page.getByRole('cell', { name: 'string Foo field example: "bar"' }).getByText('example: "bar"').click();
+  });
+
+  test('(first) channel headers tab is rendered', async ({ page }) => {
+    // when
+    await page.locator("#channel-kafka-another-topic-publish-AnotherPayloadDto").click()
 
+    // then
     await page.getByRole('tab', { name: 'Headers' }).getByText('Headers').click();
     await page.getByRole('heading', { name: 'HeadersNotDocumented #/components/schemas/HeadersNotDocumented' }).click();
     await expect(page.getByRole('tabpanel', { name: 'Headers' }).locator('textarea'))
       .toHaveValue(JSON.stringify(asyncApiJson.components.schemas.HeadersNotDocumented.example, null, 2))
+  });
+
+  test('(first) channel bindings tab is rendered', async ({ page }) => {
+    // when
+    await page.locator("#channel-kafka-another-topic-publish-AnotherPayloadDto").click()
 
+    // then
     await page.getByRole('tab', { name: 'Bindings' }).getByText('Bindings').click();
     await page.getByText(/\{\s+"groupId":\s+\{\s+"type":\s+"string",\s+"enum":\s+\[\s+"example-group-id"\s+\]\s+\}\s+\}/).click();
   });

tests/header.test.ts

@@ -1,12 +1,12 @@
 import { test, expect } from '@playwright/test';
 
-test.describe('Header', ()=> {
+test.describe('Header section', ()=> {
   test.beforeEach(async ({ page }, testInfo) => {
-    console.log(`Running ${testInfo.title}`);
-    await page.goto('http://localhost:4200/');
+    await page.goto('/');
   });
 
-  test('github url is shown', async ({ page }) => {
+  test('github url is shown as link', async ({ page }) => {
+    // then
     await expect(page.locator("mat-toolbar a")).toHaveAttribute('href', 'https://github.com/stavshamir/springwolf')
   });
 })

tests/info.test.ts

@@ -1,24 +1,27 @@
 import { test, expect } from '@playwright/test';
 import asyncApiJson from '../src/app/shared/mock/mock.springwolf-kafka-example.json'
 
-test.describe('Info', ()=> {
+test.describe('Info section', ()=> {
   test.beforeEach(async ({ page }, testInfo) => {
-    console.log(`Running ${testInfo.title}`);
-    await page.goto('http://localhost:4200/');
+    await page.goto('/');
   });
 
-  test('section is shown', async ({ page }) => {
+  test('info is shown', async ({ page }) => {
+    // then
     await expect(page.locator('app-info h1')).toHaveText('Springwolf example project - Kafka' );
     await expect(page.locator('app-info h5')).toHaveText('API VERSION 1.0.0 - AsyncAPI JSON file' );
     await expect(page.locator('app-info p')).toHaveText('Springwolf example project to demonstrate springwolfs abilities' );
   });
 
-  test('download of AsyncApi json', async ({ page }) => {
+  test('download of AsyncApi json matches original file', async ({ page }) => {
+    // when
     const [popup] = await Promise.all([
       page.waitForEvent('popup'),
       page.getByRole('link', { name: 'AsyncAPI JSON file' }).click()
     ]);
     const popupContent = await popup.evaluate('document.body.textContent') as string
+
+    // then
     await expect(JSON.parse(popupContent)).toStrictEqual(asyncApiJson)
   });
 })