🛠️ AzureMicrosoftPlaywrightテストTS
Microsoft Azureのクラウド環境で、Webサイトやアプリケーションの
📺 まず動画で見る(YouTube)
▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
Run Playwright tests at scale with cloud-hosted browsers and integrated Azure portal reporting.
🇯🇵 日本人クリエイター向け解説
Microsoft Azureのクラウド環境で、Webサイトやアプリケーションの
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 1
💬 こう話しかけるだけ — サンプルプロンプト
- › Azure Microsoft Playwright Tes を使って、最小構成のサンプルコードを示して
- › Azure Microsoft Playwright Tes の主な使い方と注意点を教えて
- › Azure Microsoft Playwright Tes を既存プロジェクトに組み込む方法を教えて
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Claude が読む原文 SKILL.md(中身を展開)
この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。
Azure Playwright Workspaces SDK for TypeScript
Run Playwright tests at scale with cloud-hosted browsers and integrated Azure portal reporting.
Migration Notice:
@azure/microsoft-playwright-testingis retired on March 8, 2026. Use@azure/playwrightinstead. See migration guide.
Installation
# 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
Requirements:
- Playwright version 1.47+ (basic usage)
- Playwright version 1.57+ (Azure reporter features)
Environment Variables
PLAYWRIGHT_SERVICE_URL=wss://eastus.api.playwright.microsoft.com/playwrightworkspaces/{workspace-id}/browsers
Authentication
Microsoft Entra ID (Recommended)
# 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(),
})
);
Custom Credential
import { ManagedIdentityCredential } from "@azure/identity";
import { createAzurePlaywrightConfig } from "@azure/playwright";
export default defineConfig(
config,
createAzurePlaywrightConfig(config, {
credential: new ManagedIdentityCredential(),
})
);
Core Workflow
Service Configuration
// 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(),
})
);
Run Tests
npx playwright test --config=playwright.service.config.ts --workers=20
With Azure Reporter
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"],
],
}
);
Manual Browser Connection
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();
});
Configuration Options
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 Enum
import { ServiceOS } from "@azure/playwright";
// Available values
ServiceOS.LINUX // "linux" - default
ServiceOS.WINDOWS // "windows"
ServiceAuth Enum
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 Integration
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
Key Types
import {
createAzurePlaywrightConfig,
getConnectOptions,
ServiceOS,
ServiceAuth,
ServiceEnvironmentVariable,
} from "@azure/playwright";
import type {
OsType,
AuthenticationType,
BrowserConnectOptions,
PlaywrightServiceAdditionalOptions,
} from "@azure/playwright";
Migration from Old Package
Old (@azure/microsoft-playwright-testing) |
New (@azure/playwright) |
|---|---|
getServiceConfig() |
createAzurePlaywrightConfig() |
timeout option |
connectTimeout option |
runId option |
runName option |
useCloudHostedBrowsers option |
Removed (always enabled) |
@azure/microsoft-playwright-testing/reporter |
@azure/playwright/reporter |
| Implicit credential | Explicit credential parameter |
Before (Old)
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"]],
}
);
After (New)
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"],
],
}
);
Best Practices
- Use Entra ID auth — More secure than access tokens
- Provide explicit credential — Always pass
credential: new DefaultAzureCredential() - Enable artifacts — Set
trace: "on-first-retry",video: "retain-on-failure"in config - Scale workers — Use
--workers=20or higher for parallel execution - Region selection — Choose region closest to your test targets
- HTML reporter first — When using Azure reporter, list HTML reporter before Azure reporter
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.