📝

SeleniumとPlaywrightとCypressとWebdriver.ioのアーキテクチャーについて

2023/12/19に公開

この記事はQiita ソフトウェアテストのアドベントカレンダー 19日目の記事です

はじめに

  • 日本語の記事としてテスト自動化フレームワークのアーキテクチャーをまとめたものがなかったのでまとめてみようと思いました

アーキテクチャー

Selenium

Selenium

  • Selenium 4 WebDriverのアーキテクチャー
  • クライアントライブラリとブラウザドライバー間の通信には、W3C プロトコルが使用されます。

Playwright

Playwright

  • クライアントとサーバー間のすべてのリクエストを単一のWebSocket接続で通信
    • HTTP Connectionではない
  • Chrome DevTools Protocol (CDP) を使用して Chromium と通信します。
  • Firefox と WebKit の場合、Playwright は CDP と同様の独自のプロトコルを使用している
  • WebSocket接続は、WebSocketハンドシェイクと呼ばれるプロセスを通じて、クライアントからサーバーにリクエストを送信することで確立されます。
    • クライアントへのメッセージ送信の待ち時間が非常に短い

Cypress

Cypress

  • Node Serverとブラウザの通信はWeb Socketを介して行われ、プロキシが作成された後に実行が開始される
  • CypressはNode serverからブラウザにHTTPリクエストとレスポンスを送信する
  • Cypressはネットワークレイヤーで動作
    • Cypressはネットワークレイヤーと相互作用し、ウェブトラフィックを読み取り変更することでコマンドをキャプチャ可能

Webdriver.io

Webdriver.io

  • WebdriverIOは、JSON Wire Protocolの実装であるNodeJS上で構築されている
  • オープンソースでアプリケーション開発に広く使用されているNodeJSを使用して通信を行う
  • 自動テストを実施するためにRESTfulアーキテクチャを使用
  • サービス要求はHTTPコマンドとしてNodeJSを介して送信される
  • JSON Wireプロトコルを使用し、サービスモジュールがリクエストをブラウザに転送します
  • iOS 対応デバイスのネイティブ モバイル アプリケーションをテストできる
  • 構造がシンプルで、テスト スクリプトを簡潔に記述できる

最後に

仕事で自動化ツールの検証と比較を行う際にそれぞれのアーキテクチャーを比較する必要がありました。そこで勉強になったので今回まとめてみようと思いました。
それぞれのツールで特色があり、セキュリティとかの観点から仕事ではWebdriver.ioを使用することにしました。
またWebdriver.ioを使ってみて優れたツールだなって発見がありました。またWebdriver.ioについての良さはどこかでまとめようと思います。おわり

参考

https://swaroopnadella.medium.com/selenium-vs-playwright-architecture-243c40595182
https://www.programsbuzz.com/article/playwright-architecture
https://www.programsbuzz.com/article/cypress-architecture
https://www.browserstack.com/guide/architecture-of-selenium-webdriver
https://www.browserstack.com/guide/webdriverio-tutorial-for-selenium-automation#:~:text=for automation testers.-,WebdriverIO Architecture%3A How does it work%3F,architecture to conduct automation testing.

Discussion