PuppeteerとTypeScriptの手順

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

PuppeteerとTypeScriptでテストを設定する

Not for use with personal data

テストフォルダのルートレベルに、 @axe-core/watcher パッケージとそのすべての依存関係をインストールします。 npm またはお好みのパッケージマネージャを使用します（例： yarn または pnpm）。
```
npm install --save-dev @axe-core/watcher
```
テストファイルまたはファイル群で、 puppeteerConfig() 関数、 wrapPuppeteer() 関数、および PuppeteerController クラスをインポートします： @axe-core/watcher/puppeteer
```
import {
  puppeteerConfig,
  wrapPuppeteerPage,
  PuppeteerController
} from '@axe-core/watcher/puppeteer'
```
テストセットアップコードを更新します (通常は before または beforeAll ブロック内) で、既存の browser インスタンスを作成するコードを puppeteerConfig()に呼び出すことによってラップします。そして環境からAPIキーを取得します。 (例： ACCESSIBILITY_API_KEY)：
```
// Original code:

browser = await puppeteer.launch({
  // Your existing launch options...
})

// Becomes:

const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

const browser = await puppeteer.launch(
  puppeteerConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    headless: false
  })
);
```
環境に ACCESSIBILITY_API_KEY と PROJECT_ID を設定し、あなたの個人的なAPIキーに設定してください（Axeアカウントの API KEYS タブで見つけられます）、およびプロジェクトID（プロジェクトを作成した際のこれらの説明の上部に示されています。または、プロジェクトページで プロジェクトを設定 を選択し、設定から確認できます）。

のインスタンスを作成し、あなたのPuppeteer PuppeteerController をラップします： browserContext

// Create a page instance, using your browser instance.
let page = await browser.newPage()

// Initialize the PuppeteerController by passing in the Puppeteer page.
const controller = new PuppeteerController(page)

// Use the new wrapped Puppeteer page instance.
page = wrapPuppeteerPage(page, controller)

最後に、axe Watcherからの全てのテスト結果がフラッシュされるようにします。そのために、次のコードブロックをテストの終了コード (通常は afterEach ブロック内) に追加してください：
```
afterEach(async () => {
  await controller.flush()
});
```

PuppeteerとTypeScriptの手順

Is this page helpful?

Help us improve this page

Still need help?