BUGS:

emergency-notices has actually bug instead of label element it is paragraph

Playwright testing

This project is built to test GUI functionality of buerokratt admin panel

Description:

Current project help to test Buerokratt chat Widget GUI.
Technologies used: Playwright, NODE.js, Docker

Project setup

• in root directory

• Build image docker-compose up -d

• Run docker CLI interactively docker-compose exec playwright bash

• Run tests

• To see report npx playwright show-report --host 0.0.0.0

  when done...

• Exit docker CLI exit or CTRL + D

• Stop and remove container docker-compose down

Running tests

• run all tests - npx playwright test

• run tests in specific directory - npx playwright test ./tests/chatBox

• run specific test file - npx playwright test ./tests/chatBox/visibility.spec.js

• run api test file - npx playwright test ./tests/api/sample.spec.js --config=playwright.config.api.js

• additional flags

   --debug             // debug step by step
   --ui                // inspect tests while running
   --project=chromium  // specify a browser for testing | default: all
   --headed            // graphical representation of tests | default: headless
   --workers=3         // amount of workers to run tests
   --config=playwright.config.api.js // specify a config file to use for testing | default: playwright.config.js
  

Official documentation for running and debugging tests
Tests result will be opened automatically in the browser and localhost address will be displayed in the terminal

Writing tests:

NB! Writng tests should be done outside the container. The container has to be rebuilt after.

• create new file with example.spec.js extension

• import { test, expect } from '@playwright/test'

• action before each separate test

  test.beforeEach(async ({ page }) => {
  	await page.goto('/');
  	// Additional actions here
  });
  

Official documentation - Before and after hooks

• Use different locators to find elements in DOM:
  Universal locator in Playwright is a method - .locator()
  for other useful follow this link: locators

Official documentation for writing tests

Generating tests:

NB! Test generation should be done outside the container Test can be generated using:

npx playwright codegen https://prod.buerokratt.ee/

Playwright inspector
point - click - copy - paste

Official documentation - Generating tests

Configure file

All configurations can be optionally defined, once, per test, run as flags (e.g. timeout : 30000ms,)

Global configuration are defined in: playwright.config.js and apply to every test run.

• Global timeout is set for 30 seconds.
• Failed tests will be retried once.
• Failed tests will retain a video, a screenshot and a trace.

Reading logs

• In container the test result will be diplayed http://0.0.0.0:9323
• Outside the container tests result will be opened automatically in the browser and localhost address will be displayed in the terminal.

NB! All tests are saved (including video, screenshot and trace) in the local directories until next batch of tests:

• /playwright-report
• /test-results

Test Suite for Bürokratt Admin Panel

Test Functionalities

General Testing Features

• Authentication:

  • All tests are conducted in an authenticated state. Playwright logs in before all tests, saves the cookie, and uses it to access the pages and correct translations.
  • The login logic is handled in auth.setup.js, where the authentication flow and cookie saving is described in detail. Additionally, the configuration related to authentication can be found in playwright.config.js, which includes settings required to properly simulate and test authentication in the application.

• Translations:

  • Tests are dynamically designed to handle translations in both English and Estonian. For example, translation.yes returns "Jah" when the cookie is set to the Estonian locale. This allows tests to seamlessly switch between languages based on the locale setting, ensuring all user-facing text is verified in the appropriate language.