Before conducting front-end testing, we need to clarify what kind of front-end testing we need.
Summary of front-end test types
Front-end application testing is divided into several common types:
End-to-end (e2e): An assistive bot that behaves like a user, clicking around the application and verifying that it functions correctly. A common testing framework is Playwright.
Unit: Verify that individual, isolated parts work as expected. A common testing framework is Jest.
Static: Catch typos and type errors as you write code. It is common to use Typescript inspection
Each front-end test has its applicable scenarios:
End-to-end testing: Verify that the business page functionality is basically usable.
Unit testing: Verify the complex scenario application of components.
Static testing: Try to introduce it into most front-end codes to improve the maintainability of the code.
End-to-end ( e2e ) features
Just like a user visiting a page, he doesn't care about the code changes of the interface and front-end components. He only cares about whether the specific functions are implemented normally.
Front-end pages and components change frequently, but the core business functions provided basically remain unchanged. End-to-end testing can therefore be used to ensure the robustness of the application.
practice
Project initialization
npm init playwright@latest
Add in package.json
"scripts": {
"test": "playwright test",
"report": "playwright show-report"
},
# 进行测试
playwright test
# 查看测试报告
playwright show-report
Write test cases
There are two main types of writing test cases, one is code writing, and the other is generating corresponding process code by recording clicks. I prefer to record and generate basic code first, then modify the code, and finally complete the entire testing process .
Record code
To use Vscode, download the plug-in Playwright Test for VSCode
Click Record new and an incognito mode browser will pop up. Enter the domain name to be tested in the browser and click. Code will be automatically generated.
For example: enter the URL playwright.dev/docs/writing…
Generate code
Write code
Generally speaking, when writing test code, we need to confirm the element name. Here I recommend clicking Pick locator while recording.
The corresponding elements will appear above Vscode and can be copied to do the operations we expect.
The last step is to write some expected codes. In these places, codes can only be written according to business needs.
Containerization
Usually we put e2e testing in a continuous integration framework. At this time, we need to containerize it for execution. Therefore we need to containerize playwright and create a new Dockfile under the project
# Get the base image of Node version 16
FROM node:16
# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:focal
# Set the work directory for the application
WORKDIR /app
# Set the environment path to node_modules/.bin
# ENV PATH /app/node_modules/.bin:$PATH
# COPY the needed files to the app folder in Docker image
COPY package.json /app/
COPY tests/ /app/tests/
COPY config/ /app/config/
# Install the dependencies in Node environment
RUN npm install
Build a new image based on the Dockfile in the current directory
docker build -t playwright-docker .
We can use the following command to run a one-time test container
docker run -it playwright-docker:latest npm run test
At the same time, we often need to pass some parameters in the test. In docker, use -e to pass parameters.
docker run -it -e HOST='111' playwright-docker:latest npm run test
In the code, you can use process.env.HOST to obtain
export const HOST = process.env.HOST ;
Summarize
Front-end testing can start from end-to-end testing of the overall application. End-to-end testing can improve the robustness of the front-end business page. playwright is one of the great frameworks. It supports functions such as recording code and generating screenshot reports, which is simple and easy to use.
Finally, I would like to thank everyone who reads my article carefully. Reciprocity is always necessary. Although it is not a very valuable thing, if you can use it, you can take it directly:
This information should be the most comprehensive and complete preparation warehouse for [software testing] friends. This warehouse has also accompanied tens of thousands of test engineers through the most difficult journey. I hope it can also help you!