Browserstackとは？

e2eテストができるSaaSです。 https://www.browserstack.com/

開発元はインドの企業
2011年に設立
135か国以上で25,000人以上の有料顧客と200万人の開発者を擁する（2024年12月現在）

en.wikipedia.org

課金体系はフリーミアムとなっていて4種類のようです。

無料
199$/month
459$/month
Enterprise

↓詳しくはこちら

BrowserStack Login | Sign Into The Best Mobile & Browser Testing Tool

導入背景

今現在エンジニアの人数が少なく、テスト・検証専用の部隊もありません。しかし、事業の目標のためにはガンガン開発し機能を追加していく必要があります。

ガンガン開発していくということはデグレを引き起こし見逃してしまう可能性が高いので、テストを自動化して安心して開発ができるよう導入してみました。

テストを機械に任せることで工数を削減し、我々は次の開発に進むことができます。

自動化のメリットとして "テストがブレない" こともあります。

人間がテストを行うと、いくら手順書に従って実行したとしても人間なので間違って操作してしまったり見逃してしまう可能性があります。

テストをコードとして定義することで、冪等性を持った状態でブレないテストが可能となります。（環境構築であればInfrastructure as Codeと言ったりしますね）

使ってみた

www.browserstack.com 公式サイトを参考に、git cloneしてきて数分でサンプルを動かせます。以下のツールで書いていくことができます。

Selenium
Playwright
Cypress
JS Testing API
Puppeteer

アカウント情報を設定ファイルに記述し、テストを書き終わったら npm run sample-test を実行するだけです。

$ npm run sample-test

> node-js-playwright-browserstack@1.0.0 sample-test
> npx browserstack-node-sdk playwright test --config=./playwright.config.js

2024-12-01 12:39:55 - info: Reading configs from /Users/.../browserstack/node-js-playwright-browserstack/browserstack.yml
2024-12-01 12:39:56 - info: Project and debug logs are captured by default. To disable, set disableAutoCaptureLogs: true in config.
2024-12-01 12:40:01 - info: Local binary started successfully

Running 4 tests using 1 worker
  Slow test file: [playwright-webkit-latest:OSX Ventura-browserstack] › tests/kimono_staging_test.ts (2.0m)
  Consider splitting slow test files to speed up parallel execution
  4 passed (2.1m)

2024-12-01 12:42:13 - info: Visit https://observability.browserstack.com/builds/(hashは秘密だよ) to view build report, insights, and many more debugging information all at one place!

2024-12-01 12:42:14 - info: View build on BrowserStack dashboard: https://automate.browserstack.com/dashboard/v2/builds/(hashは秘密だよ)
2024-12-01 12:42:16 - info: Deleting /Users/.../browserstack/node-js-playwright-browserstack/playwright-browserstack-sdk.config.js
2024-12-01 12:42:19 - info: Local binary stopped

テストが終了すると、結果画面へのリンクを表示してくれます