JavaScriptライブラリ「Wijmo」で作ったリッチUIのE2Eテストを、最新のSelenium 4で自動化してみよう

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第18回

　本連載では、グレープシティが提供するJavaScriptライブラリWijmo（ウィジモ）について、サンプルとともに利用例を紹介します。JavaScriptとCSSを駆使してWeb画面でリッチなUIを実装するのはよくあることですが、そのリッチUIに対してどのように自動End to End（E2E）テストのコードを書いたら良いか、標準のWeb UI部品との違いに悩んだことはないでしょうか。本記事では、Wijmoで作成したWebページに対して、Webブラウザ操作自動化ライブラリ「Selenium」を利用した自動テストコードをどのように実装できるかの一例を紹介します。

はじめに

　Wijmo（ウィジモ）は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリです。Wijmoには自動テストの手がかりとなる仕様も含まれているので、標準的なUIとの違いに心配せずトライしてみてください。また、他のライブラリを使われている方も実装のご参考としていただければ幸いです。

対象読者

• E2Eテストの自動化に興味がある方
• Webアプリ開発でリッチUIを活用されたい方

最近のSelenium

　さて、本記事をご覧の皆さまは既によくご存じかとは思いますが、あらためてSeleniumとは何かをおさらいします。そして、最新バージョンの新機能についてご紹介しましょう。

　Seleniumは、Webブラウザの自動操作ライブラリです。人間がWebブラウザでやるような手作業を自動的に再現できます。単純作業の自動化に利用できるほか、一般的な自動テストフレームワークと組み合わせることでE2Eテストの自動化の実現も可能です。

　このような仕組みはSeleniumが独自に持っているわけではありません。W3C標準の「WebDriver」により、すべてのWebブラウザは共通のAPIでおおむね同様の自動操作ができるよう標準化されました。Seleniumは、その共通のAPIを操作できるライブラリの一つというわけです。

WebDriverのアーキテクチャ

　WebDriverがW3C勧告となったのは2018年でしたが、その後もさらに内容の更新がなされており、現在は次期バージョンの草案（Working Draft）が策定されています。

　元々SeleniumはE2Eテスト自動化ライブラリとして開発されましたが、近年ではWebスクレイピングやRPAといった自動操作の分野での利用も多くなりました。さらには内部にSeleniumなどのライブラリを組み込んでWebDriver対応したノーコードツールやサービスなども現れてきています。皆さまが気づかないうちに、SeleniumやWebDriverとの接点は増えているのかもしれません。

Selenium 4の新機能

　2021年10月に、新バージョンのSelenium 4が公開されました。本記事執筆時（2021年12月）の最新バージョンは4.1.0です。Selenium 4では、次期バージョンのWebDriverとして草案段階の仕様への対応を含む、非常に多くの新機能が追加されました。主な新機能は次の通りです。

• 「Relative Locators」による、画面内での相対的な位置指定を使った要素の取得
• 複数ウィンドウ・タブの制御APIの整備・簡略化
• スクリーンショット機能の拡充(DOM要素ごとの取得、画面全体での取得)
• WebDriver拡張としての双方向通信「WebDriver BiDirectional Protocol」の実装
• Chrome DevTools APIへの対応
  • Basic認証／Digest認証対応
  • Network InterceptorによるHTTP通信状況の参照（ステータスコードなど）
• Shadow DOMへの対応

　またSelenium Gridの再構築も同時に行われ、現代的なアーキテクチャを持つようになりました。これまでZaleniumやSelenoidなどで実現されていたコンテナベースのノード管理機能なども実装されています。

　本記事では、この最新のSelenium 4と、新機能の一部を活用して自動テストコードを書いていきます。