Skip to content

Commit b7e4117

Browse files
vvs11vvs11
committed
added tutorial
1 parent ed21f11 commit b7e4117

File tree

1 file changed

+206
-0
lines changed

1 file changed

+206
-0
lines changed

‎articles/playwright-testing/tutorial-run-end-to-end-tests.md

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
---
2+
title: Tutorial: Run end to end tests with Playwright Testing
3+
description: "In this tutorial, you learn how to integrate Microsoft Playwright Testing with a Playwright test suite, run Playwright tests on cloud hosted browsers and troubleshoot failed test using reports."
4+
author: vvs11
5+
ms.author: vanshsingh
6+
ms.service: microsoft-playwright-testing
7+
ms.topic: tutorial #Don't change.
8+
ms.date: [12/18/2024]
9+
10+
#customer intent: As a Playwright user, I want to learn how to integrate my Playwright test suite with Microsoft Playwright Testing service so that I can run my test suite faster using the cloud-hosted browsers and troubleshoot easily using service reporting.
11+
12+
---
13+
14+
# Tutorial: Run end to end Playwright tests with Microsoft Playwright Testing service
15+
16+
In this tutorial, you learn how to integrate your Playwright test suite with Microsoft Playwright Testing, run tests faster using cloud-hosted browsers, and troubleshoot efficiently with the service's reporting features. You'll simulate a Playwright test suite, connect it to the service for faster execution, and use reporting tools for streamlined troubleshooting.
17+
18+
In this tutorial, you:
19+
20+
> [!div class="checklist"]
21+
> * Set up a Playwright test suite.
22+
> * Integrate Playwright test suite with Microsoft Playwright Testing service.
23+
> * Run the test suite with the service for faster execution and efficient troubleshooting.
24+
25+
## Prerequisites
26+
27+
* An Azure account with an active subscription. If you don't have an Azure subscription, create a [free account](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) before you begin.
28+
* The [Azure CLI](/cli/azure/install-azure-cli) installed on your local computer.
29+
* Azure CLI version 2.2.0 or later. Run `az --version` to find the version that is installed on your computer. If you need to install or upgrade the Azure CLI, see [How to install the Azure CLI](/cli/azure/install-azure-cli).
30+
* Visual Studio Code. If you don't have it, [download and install it](https://code.visualstudio.com/Download).
31+
* Git. If you don't have it, [download and install it](https://git-scm.com/download).
32+
33+
### Prerequisites check
34+
35+
Before you start, validate your environment:
36+
37+
* Sign in to the Azure portal and check that your subscription is active.
38+
39+
* Check your version of the Azure CLI in a terminal or command window by running `az --version`. For the latest version, see the [latest release notes](/cli/azure/release-notes-azure-cli?tabs=azure-cli).
40+
41+
If you don't have the latest version, update your installation by following the [installation guide for your operating system or platform](/cli/azure/install-azure-cli).
42+
43+
44+
## Set up Playwright test suite
45+
46+
In this step, you are creating a Playwright test suite which will be integrated with the service.
47+
48+
1. Clone the sample repository and navigate to test folder.
49+
50+
```powershell
51+
git clone https://github.com/microsoft/playwright-testing-service
52+
cd playwright-testing-service/samples/get-started
53+
```
54+
55+
2. Install dependencies
56+
57+
```powershell
58+
npm install
59+
```
60+
3. Run Playwright tests
61+
62+
Run this command to execute tests locally, without the service. This is required to verify if the tests are running fine before integrating with the service. This project is used in the next steps to integrate with the service.
63+
64+
```powershell
65+
npx playwright test
66+
```
67+
68+
## Integrate Playwright test suite with Microsoft Playwright Testing service.
69+
70+
In this tutorial, you set up Playwright Testing service and integrate the Playwright test suite you created in the previous tutorial with the service.
71+
72+
Follow these steps to set up the service and integrate the test suite.
73+
74+
1. Create a Playwright Testing workspace
75+
76+
To get started with running your Playwright tests at scale on cloud browsers, you first create a Microsoft Playwright Testing workspace in the Playwright portal.
77+
78+
[!INCLUDE [Create workspace in Playwright portal](./includes/include-playwright-portal-create-workspace.md)]
79+
80+
When the workspace creation finishes, you're redirected to the setup guide.
81+
82+
83+
2. Install Microsoft Playwright Testing package
84+
85+
Navigate to the location of your test suite you created in the previous tutorial and run this command to install service package.
86+
87+
```npm
88+
npm init @azure/microsoft-playwright-testing@latest
89+
```
90+
91+
This generates `playwright.service.config.ts` file which serves to:
92+
93+
- Direct and authenticate Playwright to the Microsoft Playwright Testing service.
94+
- Adds a reporter to publish test results and artifacts.
95+
96+
3. Configure the service region endpoint
97+
98+
In your setup, you have to provide the region-specific service endpoint. The endpoint depends on the Azure region you selected when creating the workspace.
99+
100+
To get the service endpoint URL, perform the following steps:
101+
102+
1. In **Add region endpoint in your setup**, copy the region endpoint for your workspace.
103+
104+
The endpoint URL matches the Azure region that you selected when creating the workspace. Make sure this URL is available in `PLAYWRIGHT_SERVICE_URL` environment variable.
105+
106+
:::image type="content" source="./media/quickstart-run-end-to-end-tests/playwright-testing-region-endpoint.png" alt-text="Screenshot that shows how to copy the workspace region endpoint in the Playwright Testing portal." lightbox="./media/quickstart-run-end-to-end-tests/playwright-testing-region-endpoint.png":::
107+
108+
109+
4. Set up your environment
110+
111+
To set up your environment, you have to configure the `PLAYWRIGHT_SERVICE_URL` environment variable with the value you obtained in the previous steps.
112+
113+
We recommend that you use the `dotenv` module to manage your environment. With `dotenv`, you define your environment variables in the `.env` file.
114+
115+
1. Add the `dotenv` module to your project:
116+
117+
```shell
118+
npm i --save-dev dotenv
119+
```
120+
121+
1. Create a `.env` file alongside the `playwright.config.ts` file in your Playwright project:
122+
123+
```
124+
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
125+
```
126+
127+
Make sure to replace the `{MY-REGION-ENDPOINT}` text placeholder with the value you copied earlier.
128+
129+
130+
5. Set up Authentication
131+
132+
To run your Playwright tests in your Microsoft Playwright Testing workspace, you need to authenticate the Playwright client where you're running the tests with the service. In this tutorial, it is the dev workstation where you are running the Playwright tests.
133+
134+
Microsoft Entra ID is the default and recommended authentication for the service. Use [Azure CLI](/cli/azure/install-azure-cli) to sign-in
135+
136+
```CLI
137+
az login
138+
```
139+
140+
> [!NOTE]
141+
> If you're a part of multiple Microsoft Entra tenants, make sure you sign in to the tenant where your workspace belongs. You can get the tenant ID from Azure portal. See [Find your Microsoft Entra Tenant](/azure/azure-portal/get-subscription-tenant-id#find-your-microsoft-entra-tenant). Once you get the ID, sign-in using the command `az login --tenant <TenantID>`
142+
143+
144+
6. Enable artifacts in your Playwright setup
145+
146+
In the `playwright.config.ts` file of your project, make sure you are collecting all the required artifacts.
147+
```typescript
148+
use: {
149+
trace: 'on-first-retry',
150+
video:'retain-on-failure',
151+
screenshot:'on'
152+
}
153+
```
154+
155+
## Run your tests at scale and troubleshoot easily with Microsoft Playwright Testing
156+
157+
You've now prepared the configuration for running your Playwright tests in the cloud with Microsoft Playwright Testing.
158+
159+
### Run Playwright tests with the service
160+
161+
With Microsoft Playwright Testing, you get charged based on the number of total test minutes and number of test results published. If you're a first-time user or [getting started with a free trial](./how-to-try-playwright-testing-free.md), you might start with running a single test at scale instead of your full test suite to avoid exhausting your free trial limits.
162+
163+
Perform the following steps to run Playwright tests with Microsoft Playwright Testing:
164+
165+
1. Open a terminal window.
166+
167+
1. Enter the following command to run your Playwright test suite on remote browsers and publish test results to your workspace.
168+
169+
```bash
170+
npx playwright test --config=playwright.service.config.ts --workers=20
171+
```
172+
173+
After the test completes, you can view the test status in the terminal.
174+
175+
```output
176+
Running 600 tests using 20 workers
177+
600 passed (3m)
178+
179+
Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
180+
```
181+
182+
### View test runs and results in the Playwright portal
183+
184+
You can now troubleshoot the failed test cases in the Playwright portal.
185+
186+
187+
[!INCLUDE [View test runs and results in the Playwright portal](./includes/include-playwright-portal-view-test-results.md)]
188+
189+
190+
> [!TIP]
191+
> You can use Microsoft Playwright Testing service features independently. You can publish test results to the portal without using the cloud-hosted browsers feature and you can also use only cloud-hosted browsers to expedite your test suite without publishing test results.
192+
193+
> [!NOTE]
194+
> The test results and artifacts that you publish are retained on the service for 90 days. After that, they are automatically deleted.
195+
196+
197+
198+
## Next steps
199+
200+
> [!div class="nextstepaction"]
201+
202+
> [Set up continuous end-to-end testing in CI/CD](./quickstart-automate-end-to-end-testing.md)
203+
204+
> [Explore service config options](./how-to-use-service-config-file.md)
205+
206+
> [Determine the optimal test suite configuration](./concept-determine-optimal-configuration.md)

0 commit comments

Comments
 (0)