Playwright and Allure as a good practice for web application development
Hi, my name is Ivan. I am a frontend developer from Clevertec in a team that builds a web version of an application for a large bank. In this article, I will tell you why we use Playwright in combination with Allure to automate testing and optimize the team's work.
Developers are forced to constantly search for a balance: how to release features quickly, efficiently and preferably with a small team. Our working recipe is frontends + E2E tests.
The results are as follows: we currently run about 1,000 automated tests per day. To handle this volume manually, we would have to add 15 testers to the team. But we have two of them. And the quality of the application does not suffer from this.
Why did we choose Playwright?
E2E tests check how the entire application stack works together in a real environment. They simulate end-user actions: clicking buttons, filling out forms, navigating pages, and inspecting content.
Playwright provides an API for automating actions in the browser. It offers a convenient way to create and run E2E tests, thanks to support for Chromium, Firefox, and WebKit browsers, as well as support for several programming languages: JavaScript, TypeScript, Python, and others.
It is also a simple and effective way to test web applications built on the React platform – this is our case.
Here are some key points that I would highlight based on my practice:
Selecting elements. Playwright provides convenient methods for selecting elements on the page: CSS selectors, XPath, or Playwright's built-in methods. This simplifies the process of testing React components.
Interactive actions. You can simulate various user actions: clicks, text input, and mouseovers. This is especially useful when testing interactive elements such as buttons and forms.
Waits and asynchronous operations. Powerful waitFor mechanisms synchronize test execution with dynamic page changes. This is especially important for testing React applications due to their asynchronous nature.
Testing routing. Allows you to emulate route transitions and check the correct display of the corresponding components when the URL changes for testing navigation.
Checking the state of React componentsincluding their properties, states, and internal content, helps ensure that components render correctly and as expected.
Integration with testing frameworks Jest, Mocha, or Jasmine lets you write and run tests for React applications in your favorite development environment.
These features help ensure the stability and reliability of our web application.
Playwright Startup Settings and Allure Integration
Install Playwright: npm install @playwright/test
playwright.config:
We import the necessary modules and functions from the libraries:
import { devices, defineConfig } from '@playwright/test';
import { getConfig } from 'testall-playwright';
import { testPlanFilter } from 'allure-playwright/dist/testplan';We define the test configuration using defineConfig. Inside, we use getConfig to get the configuration:
export default defineConfig(
getConfig({
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: 7,
reporter: [
['html', { open: 'never' }],
['list'],
[
'allure-playwright',
{
environmentInfo: {
E2E_NODE_VERSION: process.version,
E2E_OS: process.platform
},
suiteTitle: false,
detail: false
}
]
],
use: {
headless: true,
trace: 'retain-on-failure',
video: 'retain-on-failure',
screenshot: 'only-on-failure',
ignoreHTTPSErrors: true
},Test setup fields according to the code above:
fullyParallel: Whether to enable full parallel execution of tests.
ForbidOnly: Prevents use of only in tests if the CI environment variable is set.
retries: The number of times to retry tests if they fail.
workers: The number of parallel worker processes to run tests.
reporter: Settings for test reports, including report formats and settings.
use: Settings for running tests, such as headless mode, video recording, saving screenshots, etc..
We define projects for testing, each with its own settings:
name: Project name.
timeout: Maximum project completion time.
expect: Expected results.
testDir: Directory with tests.
snapshotDir: Directory for storing screenshots.
use: Additional settings such as base URL, navigation and action timeouts.
projects: [
{
name: ProjectName,
timeout: 180 * 1000,
expect: {
timeout: 15 * 1000,
toHaveScreenshot: { maxDiffPixels: 200 }
},
testDir: './web/tests/mock',
snapshotDir: './web/resources/snapshots/desktop',
// testIgnore: '**/mobile/**',
use: {
baseURL: process.env.BASE_URL,
navigationTimeout: 60 * 1000,
actionTimeout: 45 * 1000,
...devices['Desktop Chrome']
}
}
],We use testPlanFilter to configure filtering of tests by execution plan:
grep: testPlanFilter()
})
);Function testPlanFilter is used to filter tests based on their attributes or metadata. It is intended for use with the allure-playwright library, which integrates Allure-style reporting with the Playwright framework.
Also, to integrate with Allure, run the command: npm install @playwright/test allure-playwright
Example of writing tests with internal settings
To create the test suite in our project, we use the following code model, which includes setting up metadata for the Allure report and defining test cases:
// Определение набора тестов для функции 'название обычно совпадает с suite'
test.describe('название обычно совпадает с suite', () => {
// Перед каждым тестом выполняем следующие шаги настройки
test.beforeEach(async () => {
// Установка метаданных для отчета Allure
allure.owner(Тестировщик);
allure.feature(берется из Allure поле feature);
allure.epic(берется из Allure поле epic);
allure.suite(берется из Allure поле suite);
// Дополнительные метки Allure для теста
allure.labels(
{ name: 'Developer', value: 'Разработчик' },
{ name: 'layer', value: 'UI Tests' } // Уровень: UI Тесты
);
allure.tag('UI');
// Определение тестов, которые будут запускаться
при каждом отдельном тестовом случае
});
// Определение отдельного тестового случая с конкретным идентификатором Allure
test('Название теста @allure.id=номер', async () => {
// Примеры проверки шагов функционала:
// Проверка функциональности кнопки
// Проверка наличия панели
// Проверка отображения списка
});Code Explanation
test.describe: Defines a set of tests. The name is usually the same as the function or module being tested.
test.beforeeach: Performs the specified steps before each test. This sets the metadata for the Allure report.
allure.owner: Indicates the tester who wrote the test.
allure.feature: Indicates the functional area to which the test applies.
allure.epic: Specifies the task associated with the test.
allure.suite: Defines a group of tests.
allure.labels: Adds additional labels to classify tests.
allure.tag: Adds tags for tests.
test: Defines a single test case.
The test name includes a unique identifier for Allure (@allure.id=number).
Visualizing Test Results with Allure
In our work with Playwright we use Allure – a framework for creating beautiful and informative reports on test results. Reports contain information on test progress, screenshots of errors, logs, test parameters and much more. Thanks to the interactive web interface, they are easy to view and analyze.
In our project, the testing team creates a step-by-step guide in Allure, which is divided into folders and sections. Developers follow these instructions to create the corresponding tests.
The Playwright run is configured so that all written tests are automatically launched at a certain time of day. Once the tests are completed, a report is generated in Allure with detailed information about passed and failed tests, as well as about the execution of test steps, including screenshots and error logs.
The development and testing team uses these reports to analyze the test results. When problems are found, we take action: fix defects in the code, optimize functionality, or add new tests to cover new use cases.
Benefits of using Allure:
Informative reports, which are easy to read and understand.
Interactive web interface with the ability to filter and sort data.
Support for different programming languagesincluding Java, JavaScript, Python and others.
Integration with various testing frameworks: JUnit, TestNG, pytest and others.
Multifunctionality: it is possible to add screenshots of errors, logs, test parameters and other useful information to reports.
Results: approach bonuses for the team and the customer
Automated testing is a way to avoid wasting team resources on routine tasks and to detect errors very quickly, while redistributing the testers' efforts to more strategically important tasks: designing test scenarios or analyzing results. This is important because we work in sprints and report on the results to the customer twice a week.
In general, with this approach, we release new features faster and constantly improve the quality of the product. And a fast, predictable and high-quality result is a great option for the customer.
If you have any questions after reading the article, I will answer them in the comments.
