Agentic Awesome Skills 实战：基于 @azure/playwright 在 Azure 云端浏览器上规模化运行 Playwright TypeScript 测试-北京尧图网络

Agentic Awesome Skills 实战基于 azure/playwright 在 Azure 云端浏览器上规模化运行 Playwright TypeScript 测试【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills本文将围绕 AAS 仓库中 azure-microsoft-playwright-testing-ts 技能文档展开系统讲解如何用新一代azure/playwrightSDK 将本地 Playwright 测试迁移到 Azure 云托管浏览器上并行执行并接入 Azure 门户的统一报告体系。读完本文你将掌握从环境变量配置、Entra ID 认证、服务配置文件编写到 GitHub Actions / Azure Pipelines CI/CD 集成的完整链路以及从已退役的azure/microsoft-playwright-testing包平滑迁移的全部要点。技能定位与适用场景在 AAS 技能目录中该技能被归类为cloud类别风险等级标记为critical来源为community其目录元数据见 data/catalog.json给出的触发词包括azure、microsoft、playwright、ts、testing、run、tests、scale、cloud-hosted、browsers等。这意味着当 Agent 被要求在 Azure 云端大规模运行 Playwright 测试、使用微软托管的浏览器、并把测试结果上报到 Azure 门户时会命中此技能。该技能的核心定位一句话概括Run Playwright tests at scale with cloud-hosted browsers and integrated Azure portal reporting—— 让本机/CI 上的 Playwright 测试不再自建浏览器实例而是通过 WebSocket 连接到 Azure Playwright 托管的云端浏览器池按需横向扩展并发 worker同时把运行结果、痕迹trace、视频等工件回传到 Azure 门户统一查看。仓库中同名镜像位于 plugins/agentic-awesome-skills/skills/azure-microsoft-playwright-testing-ts/SKILL.md两份文档内容一致。迁移背景为什么必须改用 azure/playwright技能文档开头有一条关键迁移提示旧的azure/microsoft-playwright-testing包将于2026 年 3 月 8 日正式退役官方推荐改用azure/playwright。这意味着任何新项目或仍在维护的旧项目都应直接基于新包建设而不是继续在新代码中引用旧 API。新旧两代 API 的对应关系如下表摘自技能文档旧包azure/microsoft-playwright-testing新包azure/playwrightgetServiceConfig()createAzurePlaywrightConfig()timeout选项connectTimeout选项runId选项runName选项useCloudHostedBrowsers选项已移除云端浏览器恒为开启azure/microsoft-playwright-testing/reporterazure/playwright/reporter隐式凭据显式credential参数从这张表可以提炼出三条迁移要点函数与选项改名配置构造从getServiceConfig变为createAzurePlaywrightConfig连接超时与运行命名分别由connectTimeout、runName承担默认行为收紧useCloudHostedBrowsers被直接移除因为新 SDK 恒使用云托管浏览器不再提供本地/云端切换开关认证显式化旧包隐式获取凭据新包要求显式传入credential参数这实际上是强制每个接入方明确自己的认证方式避免看起来能用但说不清用谁的凭据的隐患。技能文档还分别给出了迁移前Before与迁移后After的完整配置对照后续小节会逐一展开。安装与版本要求技能文档给出的安装方式有两种# 推荐自动生成配置文件 npm init azure/playwrightlatest # 手动安装 npm install azure/playwright --save-dev npm install playwright/test^1.47 --save-dev npm install azure/identity --save-dev两种方式对比npm init azure/playwrightlatest属于脚手架式初始化会顺带生成服务配置文件骨架适合新项目起步手动安装则适合在既有 Playwright 项目中增量接入三个依赖各司其职azure/playwright服务端 SDK提供createAzurePlaywrightConfig、getConnectOptions、ServiceOS、ServiceAuth等核心 APIplaywright/testPlaywright 测试框架本体版本需符合下方要求azure/identity提供DefaultAzureCredential、ManagedIdentityCredential等认证凭据实现供credential参数使用。版本要求来自技能文档Playwright 1.47满足基础使用连接云浏览器、运行测试Playwright 1.57启用 Azure Reporter 报告能力。也就是说如果只需要跑测试可以停留在 1.47但若要用 Azure 门户报告必须把playwright/test升到 1.57 及以上。环境变量连接工作区的唯一入口PLAYWRIGHT_SERVICE_URLwss://eastus.api.playwright.microsoft.com/playwrightworkspaces/{workspace-id}/browsers该环境变量是 SDK 定位目标工作区的唯一入口结构上分为三部分wss://WebSocket 安全连接协议SDK 通过它与 Azure 侧的浏览器代理建立长连接eastus.api.playwright.microsoft.com区域服务端点。技能文档在最佳实践中强调选择离测试目标最近的区域因此这里应替换为你实际创建 Playwright 工作区Workspace所在的 Azure 区域{workspace-id}在 Azure 门户中创建 Playwright 工作区后获得的唯一标识占位符需替换为真实值。工作区级别的其它信息如访问令牌则通过另外的环境变量提供当使用ServiceAuth.ACCESS_TOKEN认证时SDK 会读取PLAYWRIGHT_SERVICE_ACCESS_TOKEN见下文认证方式小节。这类变量在本地开发时建议写入.env或 shell 配置在 CI 中则从机密存储注入。认证Entra ID 优先自定义凭据兜底方式一Microsoft Entra ID推荐技能文档明确推荐 Entra ID原 Azure AD认证其优势是比访问令牌更安全令牌不会硬编码、有生命周期管理、支持条件访问。本地开发时先用 Azure CLI 登录az login然后在服务配置文件中使用DefaultAzureCredential自动链式获取凭据// 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(), }) );DefaultAzureCredential是azure/identity提供的链式凭据它会依次尝试环境变量凭据、Azure CLI 登录态、托管身份等直到命中一种可用来源。这正是本地az login即可用、CI 中换用工作负载身份也能用的兼容设计。方式二自定义凭据对于 AKS、App Service、VM 等运行在 Azure 内且启用了托管身份的资源可以显式传入ManagedIdentityCredentialimport { ManagedIdentityCredential } from azure/identity; import { createAzurePlaywrightConfig } from azure/playwright; export default defineConfig( config, createAzurePlaywrightConfig(config, { credential: new ManagedIdentityCredential(), }) );该方式的典型场景是把测试任务直接部署在 Azure 托管环境中让平台为计算资源注入托管身份免去任何密钥管理。技能文档将credential标注为Entra ID 认证下的必填项REQUIRED for Entra ID因此无论选哪种具体凭据实现都要显式传入。核心工作流从配置到出报告服务配置文件playwright.service.config.ts服务配置文件的职责是把普通playwright.config与云服务连接参数合并。以技能文档的核心服务配置为例// 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(), }) );这里defineConfig的第一个参数是项目原有配置测试用例、目录、baseURL 等保持不变第二个参数由createAzurePlaywrightConfig(config, options)生成它会把连接参数叠加进 Playwright 的connect逻辑中。运行测试npx playwright test --configplaywright.service.config.ts --workers20关键点在于指定--configplaywright.service.config.ts才会走云服务路径而不是直接使用playwright.config.ts。--workers20将并发 worker 数拉高配合云端浏览器池实现并行执行。worker 数可以继续调大技能文档最佳实践中建议 20 或更高实际上限取决于工作区配额与测试负载。叠加 Azure Reporter若要把结果回传到 Azure 门户在第三个参数中声明 reporterimport { 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], ], } );两个细节值得注意reporter 顺序技能文档的最佳实践第 6 条明确要求HTML reporter 必须排在 Azure reporter 之前。顺序影响输出管线的拼接方式逆序可能导致 HTML 报告无法正确生成{ open: never }避免 CI 环境下尝试打开浏览器窗口这与本地/CI 两用场景匹配。手动连接浏览器不依赖 test runner如果不想走createAzurePlaywrightConfig的声明式配置可以改用getConnectOptions()手动建立连接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(); });getConnectOptions()返回wsEndpointWebSocket 端点与options连接选项随后用playwright[browserName].connect()像连接本地浏览器一样接管云端浏览器。这种模式适合自定义启动流程、或在非标准 runner 中嵌入云端浏览器的场景。配置选项全解技能文档给出了PlaywrightServiceAdditionalOptions的完整类型定义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 };逐项解读serviceAuthType认证模式ENTRA_ID或ACCESS_TOKEN默认ENTRA_ID。选择ACCESS_TOKEN时配合PLAYWRIGHT_SERVICE_ACCESS_TOKEN环境变量使用os云端浏览器操作系统默认linux可切换windows例如测试目标依赖 Windows 环境差异时runName自定义运行名称用于在 Azure 门户中标识本次测试运行便于检索与对账connectTimeout连接到云端浏览器的超时时间默认 30000ms。网络抖动或区域较远时可适当调大exposeNetwork网络暴露范围默认loopback用于控制云端浏览器对本地/内网资源的访问边界涉及访问内网被测服务时按需调整credentialEntra ID 认证下的必填凭据对象类型来自azure/identity的TokenCredential。ServiceOS 枚举import { ServiceOS } from azure/playwright; // Available values ServiceOS.LINUX // linux - default ServiceOS.WINDOWS // windowsServiceAuth 枚举import { ServiceAuth } from azure/playwright; // Available values ServiceAuth.ENTRA_ID // Recommended - uses credential ServiceAuth.ACCESS_TOKEN // Use PLAYWRIGHT_SERVICE_ACCESS_TOKEN env var可以看到ServiceAuth.ENTRA_ID与选项默认值一致显式写出的好处是代码自解释ACCESS_TOKEN模式则明确依赖PLAYWRIGHT_SERVICE_ACCESS_TOKEN环境变量。常用导出一览技能文档汇总了从azure/playwright可导入的全部关键成员import { createAzurePlaywrightConfig, getConnectOptions, ServiceOS, ServiceAuth, ServiceEnvironmentVariable, } from azure/playwright; import type { OsType, AuthenticationType, BrowserConnectOptions, PlaywrightServiceAdditionalOptions, } from azure/playwright;其中ServiceEnvironmentVariable从命名上可以推断是用来统一封装PLAYWRIGHT_SERVICE_URL等环境变量名的常量集便于避免硬编码字符串BrowserConnectOptions、OsType、AuthenticationType则是供类型标注用的 TS 类型。CI/CD 集成GitHub ActionsOIDC 联邦认证技能文档提供的 GitHub Actions 示例采用OIDCOpenID Connect联邦认证不把 Azure 密钥塞进仓库而是由 GitHub 颁发短期令牌azure/loginv2用它换取 Azure 访问凭据这对应permissions: id-token: writename: playwright-ts on: [push, pull_request] permissions: id-token: write contents: read jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Azure Login uses: azure/loginv2 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 --workers20要点拆解secrets.AZURE_CLIENT_ID/AZURE_TENANT_ID/AZURE_SUBSCRIPTION_ID对应一个专门为 GitHub Actions 注册的应用注册App Registration需在仓库 Secrets 中配置PLAYWRIGHT_SERVICE_URL同样从 Secrets 注入与本地一致地指向目标工作区运行命令复用服务配置文件playwright.service.config.ts保证本地与 CI 行为一致。Azure Pipelines如果团队使用 Azure DevOps示例中的任务块如下- task: AzureCLI2 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 --workers20 addSpnToEnvironment: trueazureSubscription: My_Service_Connection指向 Azure DevOps 服务连接Service Connection其中的服务主体凭据会被注入到环境变量addSpnToEnvironment: true正好满足DefaultAzureCredential链中环境变量凭据这一环$(PLAYWRIGHT_SERVICE_URL)是 Azure Pipelines 的变量语法同样建议存为流水线机密变量。最佳实践清单技能文档在结尾给出 6 条最佳实践本文将其与前述内容对应起来便于落地优先使用 Entra ID 认证——比访问令牌更安全避免令牌泄露风险始终显式传入 credential——即使本机可用隐式凭据显式credential: new DefaultAzureCredential()能让配置在任何环境自解释开启工件收集——在playwright.config中设置trace: on-first-retry、video: retain-on-failure失败时可结合 Azure 门户中的 trace/video 快速定位拉高并发 worker——--workers20或更高充分利用云端浏览器池的横向扩展能力区域就近选择——工作区区域尽量靠近被测目标被测站点或 API 所在区域降低网络延迟HTML reporter 放在 Azure reporter 之前——保证本地 HTML 报告正常生成同时把结果上送门户。使用边界与注意事项技能文档在 Limitations 一节明确了几条边界使用时务必遵守仅当任务与上述范围精确匹配时才启用本技能即在 Azure 云托管浏览器上规模化运行 Playwright TypeScript 测试这一明确场景不要泛化套用不要把技能输出当作环境专属验证的替代品——生产环境的权限、配额、网络策略仍需在真实环境中验证技能提供的是接入路径而非验收结论当缺少必要输入时停止并澄清——例如未提供工作区 ID{workspace-id}仍为占位符、缺少 Entra ID 权限或未定义成功标准时应先补齐信息再执行而不是猜测配置强行运行。另外需注意版本前提文档中的所有 API 均针对azure/playwright新包若项目仍停留在旧包azure/microsoft-playwright-testing应参照上文迁移表先行升级Playwright 版本也需满足 1.47基础与 1.57Azure Reporter的门槛否则相关配置项不会生效。小结azure-microsoft-playwright-testing-ts这份技能文档覆盖了一条从安装、认证、服务配置到 CI/CD 落地的完整闭环以PLAYWRIGHT_SERVICE_URL连接 Azure Playwright 工作区用createAzurePlaywrightConfig合并云连接参数以 Entra ID显式credential保障认证安全通过--workers20实现横向扩展并借助azure/playwright/reporter把结果沉淀到 Azure 门户。对仍在使用旧包的工程本文给出的函数/选项对照表与 Before/After 示例可直接作为升级清单使用。仓库中的技能原文可在 plugins/agentic-awesome-skills-claude/skills/azure-microsoft-playwright-testing-ts/SKILL.md 查阅其目录元数据category: cloud、risk: critical则记录于 data/catalog.json。【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Agentic Awesome Skills 实战：基于 @azure/playwright 在 Azure 云端浏览器上规模化运行 Playwright TypeScript 测试

相关推荐

无名杀：免费开源的网页版三国杀，3条命令开局第一把

eslint-plugin-unicorn no-useless-compound-assignment 完全指南：如何看懂“无用的复合赋值“

如何快速上手tinynet_a.in1k：面向新手的3步图像分类完整指南

更多资讯

自动驾驶黄埔军校：4500人培养体系与行业技术扩散

十分钟看懂 RuoYi-Vue-Plus：这套分布式多租户后台管理系统值不值得选型？

大厂AI超节点硬件形态与HBD电互联设计实战解析

STM32F103硬件I2C读写AT24C02：协议机制与驱动调试全解

AUTOSAR Simulink建模实战：SWC与BSW边界划分及代码生成避坑指南

戴森球计划工厂蓝图免费仓库：7000+张蓝图放下就能跑

今日更新

微信云开发旅游小程序实战：LBS打卡+UGC社交全栈方案

金融AI代理平台核心拆解：从多代理协作到财报分析实战

基于大数据的智慧旅游推荐与可视化平台架构实践

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？