Merge pull request #290712 from vvs11/vvs11/nunit-updates

updated view test run section for NUnit

Author: JamesJBarnett

articles/playwright-testing/how-to-use-service-config-file.md

@@ -212,7 +212,7 @@ Here's version of the `.runsettings` file with all the available options:
 
 ```
 
-## Options in `.runsettings` file
+## Config options in `.runsettings` file
 
 * **`serviceAuthType`**:
     - **Description**: This setting allows you to choose the authentication method you want to use for your test run. 

articles/playwright-testing/includes/include-playwright-portal-view-test-results-nunit.md

@@ -0,0 +1,31 @@
+---
+title: "Include file"
+description: "Include file"
+ms.custom: "include file"
+ms.topic: "include"
+ms.date: 11/19/2024
+---
+ 
+
+1. After your test run completes, you get a link to the Playwright portal in your terminal. Open this link to view detailed test results and associated artifacts. The portal displays essential information, including:
+    - CI build details
+    - Overall test run status
+    - The commit ID linked to the test run
+    
+    :::image type="content" source="../media/include-playwright-portal-view-test-results-nunit/playwright-testing-open-test-run.png" alt-text="Screenshot that shows list of tests in the test run." lightbox="../media/include-playwright-portal-view-test-results/playwright-testing-open-test-run.png":::
+
+3. The Playwright portal provides all the necessary information for troubleshooting. You can:
+    - View detailed error logs, and attached artifacts such as screenshots or videos.
+    - Navigate directly to the **Trace Viewer** for deeper analysis. 
+
+    :::image type="content" source="../media/include-playwright-portal-view-test-results-nunit/playwright-testing-open-test.png" alt-text="Screenshot that shows the preview of a test." lightbox="../media/include-playwright-portal-view-test-results/playwright-testing-open-test.png":::
+
+> [!NOTE]
+> Some metadata, such as the owner, description, and category, is currently not displayed on the service dashboard. If there’s additional information you’d like to see included, please submit a [GitHub issue in our repository](https://aka.ms/mpt/feedback).
+
+4. The Trace Viewer allows you to step through your test execution visually. You can:
+    - Use the timeline to hover over individual steps, revealing the page state before and after each action.
+    - Inspect detailed logs, DOM snapshots, network activity, errors, and console output for each step.
+
+    :::image type="content" source="../media/include-playwright-portal-view-test-results-nunit/playwright-testing-trace-viewer.png" alt-text="Screenshot that shows the trace viewer." lightbox="../media/include-playwright-portal-view-test-results/playwright-testing-trace-viewer.png":::
+

articles/playwright-testing/media/include-playwright-portal-view-test-results-nunit/playwright-testing-open-test-run.png

@@ -112,9 +112,15 @@ In the `playwright.config.ts` file of your project, make sure you are collecting
 
 3. Save and commit the file to your source code repository.
 
-## Update .csproj file for your project 
+## Install service package
 
-Update the `csproj` file in your repository to add details about Microsoft Playwright Testing service package in `ItemGroup` section.
+In your project, install Microsoft Playwright Testing package. 
+
+```PowerShell
+dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease
+```
+
+This updates your project's `csproj` file by adding the service package details to the `ItemGroup` section. Remember to commit these changes.
 
 ```xml
   <ItemGroup>
@@ -365,6 +371,9 @@ Update the CI workflow definition to run your Playwright tests with the Playwrig
 
     When the CI workflow is triggered, your Playwright tests run in your Microsoft Playwright Testing workspace on cloud-hosted browsers, across 20 parallel workers. The results and artifacts collected are published to the service and can be viewed on service portal.
 
+
+The settings for your test run can be defined in `.runsettings` file. For more information, see [how to use service package options](./how-to-use-service-config-file.md#config-options-in-runsettings-file)
+
 > [!NOTE]
 > Reporting feature is enabled by default for existing workspaces. This is being rolled out in stages and will take a few days. To avoid failures, confirm that `Rich diagnostics using reporting` setting is ON for your workspace before proceeding. For more information, see, [Enable reporting for workspace](./how-to-use-service-features.md#manage-feature-for-the-workspace).
 
@@ -384,8 +393,18 @@ Update the CI workflow definition to run your Playwright tests with the Playwrig
 
 You can now troubleshoot the CI pipeline in the Playwright portal,  
 
+::: zone pivot="playwright-test-runner"
+
 [!INCLUDE [View test runs and results in the Playwright portal](./includes/include-playwright-portal-view-test-results.md)]
 
+::: zone-end
+
+::: zone pivot="nunit-test-runner"
+
+[!INCLUDE [View test runs and results in the Playwright portal](./includes/include-playwright-portal-view-test-results-nunit.md)]
+
+::: zone-end
+
 
 > [!TIP]
 > 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. For details, see [How to use service features](./how-to-use-service-features.md).

articles/playwright-testing/media/include-playwright-portal-view-test-results-nunit/playwright-testing-open-test.png

@@ -24,12 +24,15 @@ Microsoft Playwright Testing service enables you to:
 - Accelerate build pipelines by running tests in parallel using cloud-hosted browsers.
 - Simplify troubleshooting by publishing test results and artifacts to the service, making them accessible through the service portal.
 
-These two features of the service can be used independently of each other and each has its own [pricing plan](https://aka.ms/mpt/pricing). This means you can:
+These two features of the service can be used independently or together, and each has its own [pricing plan](https://aka.ms/mpt/pricing). You have the flexibility to:
 
-- Expedite test runs and streamline troubleshooting by running tests in cloud-hosted browsers and publishing results to the service.
+- Expedite test runs and streamline troubleshooting by using both features: running tests in cloud-hosted browsers and publishing results to the service.
 - Run tests only in cloud-hosted browsers to finish test runs faster.
 - Publish test results to the service while continuing to run tests locally for efficient troubleshooting.
 
+> [!NOTE]
+> This article focuses on how you can publish test results to the service without using cloud-hosted browsers. If you want to learn how to also accelerate your test runs, see [quickstart: run Playwright tests at scale](./quickstart-run-end-to-end-tests.md)
+
 ## Prerequisites
 
 * 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.
@@ -261,7 +264,7 @@ You've now prepared the configuration for publishing test results and artifacts
 dotnet test --settings:.runsettings
 ```
 
-The settings for your test run are defined in `.runsettings` file. For more information, see [how to use service package options](./how-to-use-service-config-file.md#options-in-runsettings-file)
+The settings for your test run are defined in `.runsettings` file. For more information, see [how to use service package options](./how-to-use-service-config-file.md#config-options-in-runsettings-file)
 
 > [!NOTE]
 > For the Reporting feature of Microsoft Playwright Testing, you get charged based on the number 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 publishing single test result instead of your full test suite to avoid exhausting your free trial limits.
@@ -290,8 +293,17 @@ Workload updates are available. Run `dotnet workload list` for more information.
 
 You can now troubleshoot the failed test cases in the Playwright portal.
 
+::: zone pivot="playwright-test-runner"
+
 [!INCLUDE [View test runs and results in the Playwright portal](./includes/include-playwright-portal-view-test-results.md)]
 
+::: zone-end
+
+::: zone pivot="nunit-test-runner"
+
+[!INCLUDE [View test runs and results in the Playwright portal](./includes/include-playwright-portal-view-test-results-nunit.md)]
+
+::: zone-end
 
 > [!TIP]
 > You can also use Microsoft Playwright Testing service to run tests in parallel using cloud-hosted browsers. Both Reporting and cloud-hosted browsers are independent features and are billed separately. You can use either of these or both. For details, see [How to use service features](./how-to-use-service-features.md)

articles/playwright-testing/media/include-playwright-portal-view-test-results-nunit/playwright-testing-trace-viewer.png

@@ -313,7 +313,7 @@ Run Playwright tests against browsers managed by the service and see the results
 dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20
 ```
 
-The settings for your test run are defined in `.runsettings` file. See [how to use service package options](./how-to-use-service-config-file.md#options-in-runsettings-file)
+The settings for your test run are defined in `.runsettings` file. See [how to use service package options](./how-to-use-service-config-file.md#config-options-in-runsettings-file)
 
 After the test run completes, you can view the test status in the terminal.
 
@@ -337,8 +337,18 @@ Workload updates are available. Run `dotnet workload list` for more information.
 
 You can now troubleshoot the failed test cases in the Playwright portal.
 
+::: zone pivot="playwright-test-runner"
+
 [!INCLUDE [View test runs and results in the Playwright portal](./includes/include-playwright-portal-view-test-results.md)]
 
+::: zone-end
+
+::: zone pivot="nunit-test-runner"
+
+[!INCLUDE [View test runs and results in the Playwright portal](./includes/include-playwright-portal-view-test-results-nunit.md)]
+
+::: zone-end
+
 
 > [!TIP]
 > 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. 

articles/playwright-testing/quickstart-automate-end-to-end-testing.md

@@ -19,7 +19,7 @@ items:
     - name: Set up continuous end-to-end testing
       displayName: getting started, quickstart, github actions, azure pipelines, azure devops, ci/cd, CICD, continuous integration, continuous delivery
       href: quickstart-automate-end-to-end-testing.md
-    - name: Troubleshoot using rich reports and atrifacts 
+    - name: Troubleshoot using rich reports and artifacts 
       displayName: getting started, quickstart, reporting, cli, playwright, command-line
       href: quickstart-generate-rich-reports-for-tests.md
 - name: Concepts