Skip to content

Commit 0ac064c

Browse files
jslmorrisonjslmorrison
committed
Add post about Playwright
1 parent cdeb7d0 commit 0ac064c

File tree

2 files changed

+205
-0
lines changed

2 files changed

+205
-0
lines changed

‎content-org/playwright.org

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
#+hugo_base_dir: ~/development/web/jslmorrison.github.io
2+
#+hugo_section: posts
3+
#+options: author:nil
4+
5+
* Automated testing with Playwright :nixos:testing:playwright:
6+
:PROPERTIES:
7+
:EXPORT_FILE_NAME: playwright
8+
:EXPORT_DATE: 2024-06-18
9+
:END:
10+
[[https://playwright.dev/python/][Playwright]] enables reliable end-to-end testing for modern web apps - any browser, any platform, one API.
11+
12+
Read on to get it installed and running on nixos.
13+
#+hugo: more
14+
15+
** Installation
16+
#+begin_quote
17+
Playwright was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.
18+
19+
The Playwright library can be used as a general purpose browser automation tool, providing a powerful set of APIs to automate web applications, for both sync and async Python.
20+
#+end_quote
21+
22+
To begin, create =flake.nix= file with the following content:
23+
#+begin_src nix :noeval :no-expand
24+
{
25+
description = "A dev shell for running playwright e2e tests";
26+
27+
inputs.nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
28+
29+
outputs = { self, nixpkgs }:
30+
let
31+
system = "x86_64-linux";
32+
pkgs = import nixpkgs { inherit system; };
33+
in
34+
{
35+
devShells.${system}.default = pkgs.mkShell {
36+
buildInputs = with pkgs; [
37+
playwright-driver
38+
python312Full
39+
python312Packages.playwright
40+
python312Packages.pip
41+
python312Packages.pytest
42+
];
43+
44+
shellHook = ''
45+
export PLAYWRIGHT_BROWSERS_PATH=${pkgs.playwright-driver.browsers}
46+
export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
47+
'';
48+
};
49+
};
50+
}
51+
#+end_src
52+
then enter the development shell and create new virtual env:
53+
#+begin_src bash :no-expand :noeval
54+
nix develop
55+
#+end_src
56+
and create and activate new virtual env:
57+
#+begin_src bash :no-expand :noeval
58+
python -m venv .venv
59+
source .venv/bin/activate
60+
#+end_src
61+
62+
Put the pip requirements in a file named =requirements.txt= with the following content:
63+
#+begin_src text
64+
pytest-playwright
65+
#+end_src
66+
and install requirements with:
67+
#+begin_src bash :no-expand no-eval
68+
pip install -r requirements.txt
69+
#+end_src
70+
71+
** Create test(s)
72+
We are now ready to start writing tests with Python. Create a new test file with the following content:
73+
#+begin_src python :no-expand :noeval
74+
# example_test.py
75+
import re
76+
from playwright.sync_api import Page, expect
77+
78+
page.goto("https://google.co.uk/about")
79+
# Expect a title "to contain" a substring.
80+
expect(page).to_have_title(re.compile("About Google"))
81+
#+end_src
82+
83+
** Run test(s)
84+
From the terminal:
85+
#+begin_src bash :no-expand :noeval
86+
pytest --tracing on
87+
#+end_src
88+
89+
You should see some output in the terminal about the number of tests ran, passed or failed etc. Given that you have passed the =--tracing= flag when running the tests, the traces for the tests can be found in the =test-results/= directory and these can be viewed by running another command in the terminal:
90+
#+begin_src bash :no-expand :noeval
91+
playwright show trace test-results/test-example-py-test-has-title-chromium/trace.zip
92+
#+end_src
93+
Note how the trace includes the test and the browser as part of the directory structure. =chromium= is the default browser here.
94+
95+
That is a brief overview of getting started with Playwright for e2e testing. It can do so much more. Read more in the [[https://playwright.dev/python/docs/writing-tests][official docs]].

‎content/posts/playwright.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
+++
2+
title = "Automated testing with Playwright"
3+
date = 2024-06-18
4+
tags = ["nixos", "testing", "playwright"]
5+
draft = false
6+
+++
7+
8+
[Playwright](https://playwright.dev/python/) enables reliable end-to-end testing for modern web apps - any browser, any platform, one API.
9+
10+
Read on to get it installed and running on nixos.
11+
12+
<!--more-->
13+
14+
15+
## Installation {#installation}
16+
17+
> Playwright was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.
18+
>
19+
> The Playwright library can be used as a general purpose browser automation tool, providing a powerful set of APIs to automate web applications, for both sync and async Python.
20+
21+
To begin, create `flake.nix` file with the following content:
22+
23+
```nix
24+
{
25+
description = "A dev shell for running playwright e2e tests";
26+
27+
inputs.nixpkgs.url = "github:nixos/nixpkgs/nixpkgs-unstable";
28+
29+
outputs = { self, nixpkgs }:
30+
let
31+
system = "x86_64-linux";
32+
pkgs = import nixpkgs { inherit system; };
33+
in
34+
{
35+
devShells.${system}.default = pkgs.mkShell {
36+
buildInputs = with pkgs; [
37+
playwright-driver
38+
python312Full
39+
python312Packages.playwright
40+
python312Packages.pip
41+
python312Packages.pytest
42+
];
43+
44+
shellHook = ''
45+
export PLAYWRIGHT_BROWSERS_PATH=${pkgs.playwright-driver.browsers}
46+
export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
47+
'';
48+
};
49+
};
50+
}
51+
```
52+
53+
then enter the development shell and create new virtual env:
54+
55+
```bash
56+
nix develop
57+
```
58+
59+
and create and activate new virtual env:
60+
61+
```bash
62+
python -m venv .venv
63+
source .venv/bin/activate
64+
```
65+
66+
Put the pip requirements in a file named `requirements.txt` with the following content:
67+
68+
```text
69+
pytest-playwright
70+
```
71+
72+
and install requirements with:
73+
74+
```bash
75+
pip install -r requirements.txt
76+
```
77+
78+
79+
## Create test(s) {#create-test--s}
80+
81+
We are now ready to start writing tests with Python. Create a new test file with the following content:
82+
83+
```python
84+
# example_test.py
85+
import re
86+
from playwright.sync_api import Page, expect
87+
88+
page.goto("https://google.co.uk/about")
89+
# Expect a title "to contain" a substring.
90+
expect(page).to_have_title(re.compile("About Google"))
91+
```
92+
93+
94+
## Run test(s) {#run-test--s}
95+
96+
From the terminal:
97+
98+
```bash
99+
pytest --tracing on
100+
```
101+
102+
You should see some output in the terminal about the number of tests ran, passed or failed etc. Given that you have passed the `--tracing` flag when running the tests, the traces for the tests can be found in the `test-results/` directory and these can be viewed by running another command in the terminal:
103+
104+
```bash
105+
playwright show trace test-results/test-example-py-test-has-title-chromium/trace.zip
106+
```
107+
108+
Note how the trace includes the test and the browser as part of the directory structure. `chromium` is the default browser here.
109+
110+
That is a brief overview of getting started with Playwright for e2e testing. It can do so much more. Read more in the [official docs](https://playwright.dev/python/docs/writing-tests).

0 commit comments

Comments
 (0)