update docs

Author: vvs11

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 the `csproj` file of your project by adding the details of service package in  `ItemGroup` section. Make sure to check it in.
 
 ```xml
   <ItemGroup>
@@ -384,8 +390,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.
@@ -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

@@ -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