You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/core/testing/usage-instructions.md
+20-12
Original file line number
Diff line number
Diff line change
@@ -19,24 +19,32 @@ Follow these steps to install Playwright dependencies. These steps must also be
19
19
20
20
## Configuring Docker
21
21
22
-
Ionicuses [Docker](https://www.docker.com) to provide a way to run tests locally in the same environment that is used on CI. Using Docker is **optional** as all tests can be run locally on your host machine, but there are a few reasons why you might want to use Docker to run tests locally:
22
+
Ionic's test environment uses [Docker](https://www.docker.com) to ensure consistent testing conditions between local development and continuous integration (CI). While you can run tests directly on your local machine, using Docker through [Rancher Desktop](https://rancherdesktop.io) offers several benefits:
23
23
24
-
1. You want to run screenshot tests against the same ground truths used on CI to test your work. Screenshots must be tested in a consistent environment otherwise there will be screenshot mismatches. Without Docker, you would first need to generate ground truths in your local environment.
25
-
2. You want to update ground truths locally. Ground truths can be updated using a GitHub Action on CI, but this can take ~15 minutes.
26
-
3. You are a community contributor and you do not have access to the GitHub Action to update ground truths.
27
-
4. You want to debug an issue that only happen on CI. While this is rare, there are sometimes Linux-specific issues that pop up during development.
24
+
1.**Consistent Testing Environment** - Run screenshot tests in the same environment as CI, eliminating environment-specific differences and false positives.
25
+
2.**Fast Ground Truth Updates** - Generate and update screenshot ground truths locally in minutes instead of waiting for CI GitHub Actions.
26
+
3.**Universal Contributor Access** - Enable all developers, including community contributors, to work with ground truths without requiring GitHub Action access.
27
+
4.**CI Environment Replication** - Debug Linux-specific issues and reproduce CI-only problems locally in a controlled environment.
28
+
5.**Workflow Consistency** - Ensure tests behave identically across all development machines, reducing environment-specific issues.
28
29
29
-
The [Running Tests](#running-tests) and [Managing Screenshots](#managing-screenshots)sections show how to perform various tasks in Playwright with Docker. The section below shows how to configure your environment to get set up with Docker.
30
+
Rancher Desktop provides the Docker engine functionality needed to run our containerized tests. It's a free, open-source alternative to Docker Desktop that we use to ensure a consistent testing environment. The following sections on [Running Tests](#running-tests) and [Managing Screenshots](#managing-screenshots)will show you how to use Playwright with Docker through Rancher Desktop. First, let's get your environment set up with Rancher Desktop.
30
31
31
-
### Installing Docker
32
+
### Installing Rancher Desktop
32
33
33
-
Docker can be installed by [following the steps on the Docker website](https://docs.docker.com/get-docker/).
34
+
Rancher Desktop can be installed by [following the steps on the Rancher Desktop website](https://rancherdesktop.io/).
35
+
36
+
After launching Rancher Desktop, choose the following settings to ensure Docker is properly configured:
37
+
- Uncheck "Enable Kubernetes"
38
+
- Choose Container Engine: `dockerd` (this enables the Docker Engine)
39
+
- Configure PATH: Automatic
40
+
41
+
Once installed and configured, you can use all Docker commands through Rancher Desktop just as you would with Docker Desktop. All commands in this guide that reference Docker (such as `npm run test.e2e.docker`) will work through Rancher Desktop's Docker engine.
34
42
35
43
### Docker and Windows Development
36
44
37
45
Developers using Windows who wish to run tests using Docker must use the [Windows Subsystem for Linux v2 (WSL 2)](https://learn.microsoft.com/en-us/windows/wsl/about). Developers who wish to run headed tests will also need to use WSLg.
38
46
39
-
If you are running Docker Desktop on Windows 10 or 11 you likely already have both WSL and WSLg installed. The following steps show how to verify that WSL and WSLg are installed. If either of the below verification checks fail, then developers should [download the latest version of WSL](https://apps.microsoft.com/store/detail/9P9TQF7MRM4R?hl=en-us&gl=US).
47
+
The following steps show how to verify that WSL and WSLg are installed. If either of the below verification checks fail, then developers should [download the latest version of WSL](https://apps.microsoft.com/store/detail/9P9TQF7MRM4R?hl=en-us&gl=US).
40
48
41
49
1. To verify WSL is installed, launch "WSL" from the start menu. If "WSL" does not show up in the start menu then you do not have WSL installed.
42
50
2. With WSL open, verify that WSLg is installed: `ls -a -w 1 /mnt/wslg`. If the command fails with `No such file or directory` then your system is either missing WSLg or running an old version.
@@ -62,7 +70,7 @@ macOS uses [XQuartz](https://www.xquartz.org) to use XServer on macOS.
62
70
63
71
1. Install [Homebrew](https://brew.sh) if not already installed. You can run `brew --version` to check if Homebrew is installed.
64
72
2. Install XQuartz: `brew install --cask xquartz`
65
-
3. Open XQuartz, go to `Preferences > Security`, and check “Allow connections from network clients”.
73
+
3. Open XQuartz, go to `Preferences > Security`, and check "Allow connections from network clients".
66
74
4. Restart your computer.
67
75
5. Start XQuartz from the command line: `xhost +localhost`
68
76
6. Open Docker Desktop and edit settings to give access to `/tmp/.X11-unix` in `Preferences > Resources > File sharing`.
@@ -111,7 +119,7 @@ npm run test.e2e src/components/button/test
111
119
112
120
### Running Tests Inside Docker
113
121
114
-
While `npm run test.e2e` can be used to run tests in the same environment that you are developing in, `npm run test.e2e.docker` can be used to run tests in a Docker environment provided by the Ionic team. This command supports all the same features as `npm run test.e2e` detailed in the previous section.
122
+
While `npm run test.e2e` can be used to run tests in the same environment that you are developing in, `npm run test.e2e.docker` can be used to run tests in a Docker environment provided by the Ionic team through [Rancher Desktop](#installing-rancher-desktop). This command supports all the same features as `npm run test.e2e` detailed in the previous section.
115
123
116
124
This command builds a Docker image before tests run. It will also re-build the Docker image in the event that a Playwright update was merged into the repo.
117
125
@@ -208,7 +216,7 @@ If you are running a test that takes a screenshot, you must first generate the r
208
216
209
217
### Generating or Updating Ground Truths With Docker (Local Development)
210
218
211
-
We recommend generating ground truths inside of [Docker](https://www.docker.com). This allows anyone contributing to Ionic Framework to create or update ground truths.
219
+
We recommend generating ground truths inside of [Docker](https://www.docker.com) using [Rancher Desktop](#installing-rancher-desktop). This allows anyone contributing to Ionic Framework to create or update ground truths in a consistent environment.
212
220
213
221
To create or update ground truths, run the following command:
0 commit comments