タイトル : インストール Playwrightをはじめよう 2025
更新日 : 2025-02-08
カテゴリ : プログラミング
タグ :

Playwrightをはじめよう 2025

インストールします

installではなくinitですね。

$ npm init playwright@latest

> pr_test01@0.0.0 npx
> create-playwright

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) 

インストール中に sudo がある。ちょっとびっくり。

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - ./tests/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 
$ 

上記にあるように testsが作成されて、以下の3つがありますね。

  • ./playwright.config.ts - Playwright Test configuration
  • ./tests/example.spec.ts - Example end-to-end test
  • ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests

demo-todo-app.spec.ts を見ながら、example.spec.ts を書き換えてみましょう。