azure-microsoft-playwright-testing-ts

Name: azure-microsoft-playwright-testing-ts
Author: sickn33

github.com/sickn33测试与质量48.7k63 次安装今天更新

代码仓库

关于 azure-microsoft-playwright-testing-ts

面向 TypeScript 的技能，使用云托管浏览器运行 Playwright 测试，并提供 Azure 门户报告。它支持配置服务连接和手动连接浏览器，并说明如何迁移到当前的 @azure/playwright 包。

主要功能

01配置云浏览器测试运行
02手动连接到服务浏览器
03添加 Azure 门户报告
04使用 Entra ID 或访问令牌进行身份验证
05集成 GitHub Actions 和 Azure Pipelines

适用场景

01在云工作区运行浏览器测试
02在 CI/CD 中执行 Playwright 测试
03在 Azure 门户查看测试运行
04从已停用的包迁移

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill azure-microsoft-playwright-testing-ts

安装后在 Claude Code 中输入/azure-microsoft-playwright-testing-ts确认已加载。

详细介绍

Azure Playwright Workspaces SDK for TypeScript

借助云托管浏览器和集成的 Azure 门户报告，大规模运行 Playwright 测试。

迁移通知： @azure/microsoft-playwright-testing 将于 2026 年 3 月 8 日停用。请改用 @azure/playwright。请参阅迁移指南。

安装

# Recommended: Auto-generates config
npm init @azure/playwright@latest

# Manual installation
npm install @azure/playwright --save-dev
npm install @playwright/test@^1.47 --save-dev
npm install @azure/identity --save-dev

要求：

Playwright 版本 1.47+（基本用法）
Playwright 版本 1.57+（Azure 报告功能）

环境变量

PLAYWRIGHT_SERVICE_URL=wss://eastus.api.playwright.microsoft.com/playwrightworkspaces/{workspace-id}/browsers

身份验证

Microsoft Entra ID（推荐）

# Sign in with Azure CLI
az login

// playwright.service.config.ts
import { defineConfig } from "@playwright/test";
import { createAzurePlaywrightConfig, ServiceOS } from "@azure/playwright";
import { DefaultAzureCredential } from "@azure/identity";
import config from "./playwright.config";

export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential(),
  })
);

自定义凭据

import { ManagedIdentityCredential } from "@azure/identity";
import { createAzurePlaywrightConfig } from "@azure/playwright";

export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    credential: new ManagedIdentityCredential(),
  })
);

核心工作流

服务配置

// playwright.service.config.ts
import { defineConfig } from "@playwright/test";
import { createAzurePlaywrightConfig, ServiceOS } from "@azure/playwright";
import { DefaultAzureCredential } from "@azure/identity";
import config from "./playwright.config";

export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    os: ServiceOS.LINUX,
    connectTimeout: 30000,
    exposeNetwork: "<loopback>",
    credential: new DefaultAzureCredential(),
  })
);

运行测试

npx playwright test --config=playwright.service.config.ts --workers=20

使用 Azure 报告器

import { defineConfig } from "@playwright/test";
import { createAzurePlaywrightConfig, ServiceOS } from "@azure/playwright";
import { DefaultAzureCredential } from "@azure/identity";
import config from "./playwright.config";

export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential(),
  }),
  {
    reporter: [
      ["html", { open: "never" }],
      ["@azure/playwright/reporter"],
    ],
  }
);

手动连接浏览器

import playwright, { test, expect, BrowserType } from "@playwright/test";
import { getConnectOptions } from "@azure/playwright";

test("manual connection", async ({ browserName }) => {
  const { wsEndpoint, options } = await getConnectOptions();
  const browser = await (playwright[browserName] as BrowserType).connect(wsEndpoint, options);
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto("https://example.com");
  await expect(page).toHaveTitle(/Example/);

  await browser.close();
});

配置选项

type PlaywrightServiceAdditionalOptions = {
  serviceAuthType?: "ENTRA_ID" | "ACCESS_TOKEN";  // Default: ENTRA_ID
  os?: "linux" | "windows";                        // Default: linux
  runName?: string;                                // Custom run name for portal
  connectTimeout?: number;                         // Default: 30000ms
  exposeNetwork?: string;                          // Default: <loopback>
  credential?: TokenCredential;                    // REQUIRED for Entra ID
};

ServiceOS 枚举

import { ServiceOS } from "@azure/playwright";

// Available values
ServiceOS.LINUX   // "linux" - default
ServiceOS.WINDOWS // "windows"

ServiceAuth 枚举

import { ServiceAuth } from "@azure/playwright";

// Available values
ServiceAuth.ENTRA_ID      // Recommended - uses credential
ServiceAuth.ACCESS_TOKEN  // Use PLAYWRIGHT_SERVICE_ACCESS_TOKEN env var

CI/CD 集成

GitHub Actions

name: playwright-ts
on: [push, pull_request]

permissions:
  id-token: write
  contents: read

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Azure Login
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZURE_CLIENT_ID }}
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

      - run: npm ci
      
      - name: Run Tests
        env:
          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
        run: npx playwright test -c playwright.service.config.ts --workers=20

Azure Pipelines

- task: AzureCLI@2
  displayName: Run Playwright Tests
  env:
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
  inputs:
    azureSubscription: My_Service_Connection
    scriptType: pscore
    inlineScript: |
      npx playwright test -c playwright.service.config.ts --workers=20
    addSpnToEnvironment: true

主要类型

import {
  createAzurePlaywrightConfig,
  getConnectOptions,
  ServiceOS,
  ServiceAuth,
  ServiceEnvironmentVariable,
} from "@azure/playwright";

import type {
  OsType,
  AuthenticationType,
  BrowserConnectOptions,
  PlaywrightServiceAdditionalOptions,
} from "@azure/playwright";

从旧版包迁移

旧版（`@azure/microsoft-playwright-testing`）	新版（`@azure/playwright`）
`getServiceConfig()`	`createAzurePlaywrightConfig()`
`timeout` 选项	`connectTimeout` 选项
`runId` 选项	`runName` 选项
`useCloudHostedBrowsers` 选项	已移除（始终启用）
`@azure/microsoft-playwright-testing/reporter`	`@azure/playwright/reporter`
隐式凭据	显式 `credential` 参数

迁移前（旧版）

import { getServiceConfig, ServiceOS } from "@azure/microsoft-playwright-testing";

export default defineConfig(
  config,
  getServiceConfig(config, {
    os: ServiceOS.LINUX,
    timeout: 30000,
    useCloudHostedBrowsers: true,
  }),
  {
    reporter: [["@azure/microsoft-playwright-testing/reporter"]],
  }
);

迁移后（新版）

import { createAzurePlaywrightConfig, ServiceOS } from "@azure/playwright";
import { DefaultAzureCredential } from "@azure/identity";

export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    os: ServiceOS.LINUX,
    connectTimeout: 30000,
    credential: new DefaultAzureCredential(),
  }),
  {
    reporter: [
      ["html", { open: "never" }],
      ["@azure/playwright/reporter"],
    ],
  }
);

最佳实践

使用 Entra ID 身份验证 — 比访问令牌更安全
显式提供凭据 — 始终传入 credential: new DefaultAzureCredential()
启用测试产物 — 在配置中设置 trace: "on-first-retry"、video: "retain-on-failure"
扩展工作进程 — 并行执行时使用 --workers=20 或更高值
选择区域 — 选择离测试目标最近的区域
先配置 HTML 报告器 — 使用 Azure 报告器时，将 HTML 报告器列在 Azure 报告器之前

适用场景

当需要执行概述中描述的工作流或操作时，可使用此技能。

限制

仅当任务明确符合上述范围时，才使用此技能。
不要将输出视为环境特定验证、测试或专家审查的替代品。
如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。

远程浏览器可以访问通过 exposeNetwork 暴露的端点，也可能上传包含机密的跟踪记录/屏幕截图。连接前，请限定暂存主机、测试凭据、测试产物保留策略以及工作进程/成本预算；回环访问是一种网络能力，并不代表隔离。切勿将云凭据暴露给不受信任的分支代码，也不要通过这些测试执行生产环境写入操作。

支持 Markdown

登录后评论

基本信息

作者: sickn33
仓库: sickn33/agentic-awesome-skills
分类: 测试与质量
安装次数: 63
GitHub Stars: 48,675

报告问题