Onboarding Playwright (JavaScript and TypeScript) to AzureTestPlanV0 Task #21095

anshika-gupta21 · 2025-06-18T13:46:36Z

Task Name: AzureTestPlanV0

Description

Currently, ATP supports four frameworks: JavaMaven, JavaGradle, PyTest, Jest. This PR introduces the integration of the Playwright framework, supporting both JavaScript and TypeScript, with Azure Test Plans (ATP) Task to enhance automated testing capabilities. Playwright is a powerful open-source automation framework that simplifies end-to-end testing across different browsers.

Key Features & Implementation Details:

ATP Integration:

The pipeline is configured to connect Playwright tests with ATP, enabling automated execution of test plans and test cases.

Test Execution & Reporting:

The pipeline executes Playwright tests and publishes results in the tests tab.
Execution status and history are reflected in the Execute tab of the test plan.
The Runs tab displays detailed test reports, including the attached test-results.xml file.
Detailed reporting includes pass/fail status, execution time, and browser-specific results.

Cross-Package Test Handling and Telemetry:

Test cases located in different packages under the tests folder are automatically discovered and executed.
The Playwright test executor uses grep to collect all test cases and generate a unified JUnit XML report.
Pipeline logs include telemetry to support traceability and debugging.
Playwright-specific test modifiers such as .skip(), .fail(), and .only() are handled to reflect expected outcomes.

Multi-Browser and Dual Language Support:

Tests are executed across Chromium, Firefox, and WebKit to ensure cross-browser compatibility.
Both JavaScript and TypeScript test files are supported.
UI options allow users to distinguish between the two languages while using a common executor in the background.

Demo video: https://microsoftapc-my.sharepoint.com/:v:/g/personal/t-anshgupta_microsoft_com/EZiGK7aFm-9FgpELYZyNQxsBFzmUgRUTh5uVDBeys_drtg?e=IMknGX

The language selection options visible in UI:

Published results on Test tab:

test-results.xml file:

Associated Automation:

Progress Report:

Checklist

Task version was bumped — see versioning guide
Verified the task behaves as expected

…ight support

microsoft-github-policy-service · 2025-06-18T13:46:47Z

@anshika-gupta21 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

(default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
@microsoft-github-policy-service agree
(when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.
@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

Contribution License Agreement

This Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
and conveys certain license rights to Microsoft Corporation and its affiliates (“Microsoft”) for Your
contributions to Microsoft open source projects. This Agreement is effective as of the latest signature
date below.

Definitions.
“Code” means the computer software code, whether in human-readable or machine-executable form,
that is delivered by You to Microsoft under this Agreement.
“Project” means any of the projects owned or managed by Microsoft and offered under a license
approved by the Open Source Initiative (www.opensource.org).
“Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any
Project, including but not limited to communication on electronic mailing lists, source code control
systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of
discussing and improving that Project, but excluding communication that is conspicuously marked or
otherwise designated in writing by You as “Not a Submission.”
“Submission” means the Code and any other copyrightable material Submitted by You, including any
associated comments and documentation.
Your Submission. You must agree to the terms of this Agreement before making a Submission to any
Project. This Agreement covers any and all Submissions that You, now or in the future (except as
described in Section 4 below), Submit to any Project.
Originality of Work. You represent that each of Your Submissions is entirely Your original work.
Should You wish to Submit materials that are not Your original work, You may Submit them separately
to the Project if You (a) retain all copyright and license information that was in the materials as You
received them, (b) in the description accompanying Your Submission, include the phrase “Submission
containing materials of a third party:” followed by the names of the third party and any licenses or other
restrictions of which You are aware, and (c) follow any other instructions in the Project’s written
guidelines concerning Submissions.
Your Employer. References to “employer” in this Agreement include Your employer or anyone else
for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your
Submission is made in the course of Your work for an employer or Your employer has intellectual
property rights in Your Submission by contract or applicable law, You must secure permission from Your
employer to make the Submission before signing this Agreement. In that case, the term “You” in this
Agreement will refer to You and the employer collectively. If You change employers in the future and
desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement
and secure permission from the new employer before Submitting those Submissions.
Licenses.

Copyright License. You grant Microsoft, and those who receive the Submission directly or
indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license in the
Submission to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute
the Submission and such derivative works, and to sublicense any or all of the foregoing rights to third
parties.
Patent License. You grant Microsoft, and those who receive the Submission directly or
indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license under
Your patent claims that are necessarily infringed by the Submission or the combination of the
Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and
import or otherwise dispose of the Submission alone or with the Project.
Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement.
No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are
granted by implication, exhaustion, estoppel or otherwise.

Representations and Warranties. You represent that You are legally entitled to grant the above
licenses. You represent that each of Your Submissions is entirely Your original work (except as You may
have disclosed under Section 3). You represent that You have secured permission from Your employer to
make the Submission in cases where Your Submission is made in the course of Your work for Your
employer or Your employer has intellectual property rights in Your Submission by contract or applicable
law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You
have the necessary authority to bind the listed employer to the obligations contained in this Agreement.
You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS
REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES
EXPRESSLY STATED IN SECTIONS 3, 4, AND 6, THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS
PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF
NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.
Notice to Microsoft. You agree to notify Microsoft in writing of any facts or circumstances of which
You later become aware that would make Your representations in this Agreement inaccurate in any
respect.
Information about Submissions. You agree that contributions to Projects and information about
contributions may be maintained indefinitely and disclosed publicly, including Your name and other
information that You submit with Your Submission.
Governing Law/Jurisdiction. This Agreement is governed by the laws of the State of Washington, and
the parties consent to exclusive jurisdiction and venue in the federal courts sitting in King County,
Washington, unless no federal subject matter jurisdiction exists, in which case the parties consent to
exclusive jurisdiction and venue in the Superior Court of King County, Washington. The parties waive all
defenses of lack of personal jurisdiction and forum non-conveniens.
Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and
supersedes any and all prior agreements, understandings or communications, written or oral, between
the parties relating to the subject matter hereof. This Agreement may be assigned by Microsoft.

bhaveshbhati · 2025-06-19T08:48:22Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+    async discoverTests(listOfTestsToBeExecuted: string[], ciData: ciDictionary, listOfTestsToBeRan: string[]): Promise<IOperationResult> {
+        let operationResult: IOperationResult = { returnCode: 0, errorMessage: '' };
+
+        listOfTestsToBeExecuted.forEach(element => {


nit: test instead of element

bhaveshbhati · 2025-06-19T08:48:37Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+
+    if (!testsToBeExecuted || testsToBeExecuted.length === 0) {
+        tl.debug('No tests to execute');
+        return { returnCode: 0, errorMessage: 'No tests to execute' };


nit: formatting

bhaveshbhati · 2025-06-19T08:49:42Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+    let operationResult: IOperationResult = { returnCode: 0, errorMessage: '' };
+    let executionTimer = new SimpleTimer(constants.AUTOMATED_EXECUTION);
+
+    tl.debug('Entering executeTests method');


I think this can be removed.

bhaveshbhati · 2025-06-19T08:51:40Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+        tl.debug(`Executing Playwright test command: ${commandPreview}`);
+
+        operationResult.returnCode = await this.toolRunner.execAsync();
+


nit: remove extra line.

adityashahms

Let me know once changes are done.

adityashahms · 2025-06-19T09:56:49Z

Tasks/AzureTestPlanV0/Automated Flow/automatedFlow.ts

+        case 'javascriptplaywright': 
+            return new PlaywrightTestExecutor();
+        case 'typescriptplaywright':
+            return new PlaywrightTestExecutor();


If understand correctly, both are doing the identical work. Can we use a single option instead of providing two?

adityashahms · 2025-06-19T09:57:21Z

Tasks/AzureTestPlanV0/Common/utils.ts

@@ -73,6 +73,17 @@ export function separateJestTestName(inputString) {
    }
 }

+export function separatePlaywrightTestName(inputString) {


Add comment before the function showcasing input and output of function

adityashahms · 2025-06-19T10:00:14Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+
+    let grepArg = '';
+    try {
+        const junitOutput = 'test-results/test-results.xml';


Pull out all the code used for setup before the start() function invocation on line 71. In the execution timer, lets track only the time used for executing test not for building the cmdlet.

adityashahms · 2025-06-19T10:02:25Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+        this.toolRunner.arg('test');
+        this.toolRunner.arg('--reporter=junit');
+
+        if (grepArg) {


Is check required? Since we would have the grep argument each time? In line 66, we already are checking if we have list of valid test cases or not

adityashahms · 2025-06-19T10:04:14Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+        }
+
+        // Playwright test name selection usually uses 'grep'
+        if (testsToBeExecuted && testsToBeExecuted.length > 0) {


If condition is redundant since we are checking before hand that testsToBeExecuted is nonnull and nonempty

bhaveshbhati · 2025-06-19T10:52:39Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+    ciData['executionStatus'] = operationResult.returnCode === 0 ? 'Success' : 'Failure';
+
+    // Log telemetry data
+    tl.debug(`Telemetry Data Before Logging: ${JSON.stringify(ciData)}`);


nit: Should we log this ?

KathanS · 2025-06-19T11:02:07Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+
+            this.toolRunnerPath = tl.which(this.testRunnerCLI, true);
+            this.toolRunner = tl.tool(this.toolRunnerPath);
+            this.toolRunner.line('install');


Should we also check if cross-env is present using tl.which('cross-env', false) and install if not present? since, we will be using cross-env later

KathanS · 2025-06-19T11:15:00Z

Tasks/AzureTestPlanV0/Automated Flow/TestExecutors/PlaywrightTestExecutor.ts

+
+        // Playwright test name selection usually uses 'grep'
+        if (testsToBeExecuted && testsToBeExecuted.length > 0) {
+            const grepPattern = testsToBeExecuted.map(t => `${t}`).join('|');


small suggestion on edge case: should we add escape for regex, as in add \ before special characters? for example, if test name is "[test]" it should be passed as "\[test\]" in grepArg to avoid "[", ']" considered as special characters used in regex matching

…te language support

Anshika Gupta added 3 commits June 15, 2025 23:03

Add Playwright test executor and update task configuration for Playwr…

bad72b1

…ight support

Restored task id to previous one

e816ebc

Remove redundant debug logs

9ed0be8

anshika-gupta21 requested review from KathanS and adityashahms June 19, 2025 06:14

bhaveshbhati reviewed Jun 19, 2025

View reviewed changes

adityashahms requested changes Jun 19, 2025

View reviewed changes

bhaveshbhati reviewed Jun 19, 2025

View reviewed changes

KathanS reviewed Jun 19, 2025

View reviewed changes

Anshika Gupta added 2 commits June 20, 2025 00:11

Update PlaywrightTestExecutor to install cross-env and removed separa…

c3b9e7b

…te language support

Improved formatting

7336c6c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Onboarding Playwright (JavaScript and TypeScript) to AzureTestPlanV0 Task #21095

Onboarding Playwright (JavaScript and TypeScript) to AzureTestPlanV0 Task #21095

anshika-gupta21 commented Jun 18, 2025

Uh oh!

microsoft-github-policy-service bot commented Jun 18, 2025

Contribution License Agreement

Uh oh!

bhaveshbhati Jun 19, 2025

Uh oh!

bhaveshbhati Jun 19, 2025

Uh oh!

bhaveshbhati Jun 19, 2025

Uh oh!

bhaveshbhati Jun 19, 2025

Uh oh!

adityashahms left a comment

Uh oh!

adityashahms Jun 19, 2025

Uh oh!

adityashahms Jun 19, 2025

Uh oh!

adityashahms Jun 19, 2025

Uh oh!

adityashahms Jun 19, 2025

Uh oh!

adityashahms Jun 19, 2025

Uh oh!

bhaveshbhati Jun 19, 2025

Uh oh!

KathanS Jun 19, 2025

Uh oh!

KathanS Jun 19, 2025 •

edited

Loading

Uh oh!

Uh oh!

		tl.debug(`Executing Playwright test command: ${commandPreview}`);

		operationResult.returnCode = await this.toolRunner.execAsync();

Onboarding Playwright (JavaScript and TypeScript) to AzureTestPlanV0 Task #21095

Are you sure you want to change the base?

Onboarding Playwright (JavaScript and TypeScript) to AzureTestPlanV0 Task #21095

Conversation

anshika-gupta21 commented Jun 18, 2025

Task Name: AzureTestPlanV0

Description

Key Features & Implementation Details:

Demo video: https://microsoftapc-my.sharepoint.com/:v:/g/personal/t-anshgupta_microsoft_com/EZiGK7aFm-9FgpELYZyNQxsBFzmUgRUTh5uVDBeys_drtg?e=IMknGX

Checklist

Uh oh!

microsoft-github-policy-service bot commented Jun 18, 2025

Contribution License Agreement

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adityashahms left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KathanS Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KathanS Jun 19, 2025 •

edited

Loading