Chrome DevTools の概要
Chrome DevTools は、Chrome、Opera、Microsoft Edge などの Chromium ベースのブラウザに直接組み込まれているツールのセットで、開発者が Web サイトのデバッグや調査を行うのに役立ちます。
Chrome DevTools を使用すると、開発者は Web サイトにさらに深くアクセスでき、次のことが可能になります。
- DOM 内の要素を検査する
- 要素と CSS をその場で編集する
- Web サイトのパフォーマンスを確認および監視する
- ユーザーの地理的位置をシミュレートする
- より速い/より遅いネットワーク速度をシミュレートする
- JavaScriptの実行とデバッグ
- コンソールログを表示する
- 等
Selenium 4 Chrome DevTools API
Selenium は、Web ブラウザーの自動化をサポートするツールとライブラリの包括的なプロジェクトです。Selenium 4 では、Chrome DevTools API のネイティブ サポートが追加されています。これらの新しい API を使用すると、テストで次のことが可能になります。
- ネットワークトラフィックとパフォーマンスをキャプチャして監視する
- 位置認識テスト、ローカリゼーション、および国際化テストのために地理的位置をシミュレートします
- デバイスモードを変更し、アプリの応答性をテストする
そしてそれは氷山の一角にすぎません。
Selenium 4 では、新しい ChromiumDriver クラスが導入されています。このクラスには、Chrome DevTools にアクセスするための 2 つのメソッド、getDevTools() とexecuteCdpCommand() が含まれています。
getDevTools() メソッドは、send() メソッドを使用して CDP 用の組み込み Selenium コマンドを送信できるようにする新しい DevTools オブジェクトを返します。これらのコマンドは、CDP 関数の呼び出しをより明確かつ簡単にするラッパーです。
executeCdpCommand() メソッドを使用しても CDP メソッドを実行できますが、より原始的です。ラップされた API を使用する代わりに、Chrome DevTools コマンドとそのコマンドのパラメーターを直接渡すことができます。CDP コマンド用の Selenium ラッパー API がない場合、または Selenium API とは異なる方法で CDP コマンドを呼び出したい場合は、executeCdpCommand() を使用できます。
ChromeDriver や EdgeDriver などの Chromium ベースのドライバーは ChromiumDriver を継承するため、これらのドライバーからも Selenium CDP API にアクセスできるようになります。
これらの新しい Selenium 4 API を活用してさまざまなユースケースに対処する方法を見てみましょう。
デバイスモードをシミュレートする
私たちが現在構築しているアプリのほとんどは、さまざまなプラットフォーム、デバイス (モバイル、タブレット、ウェアラブル、デスクトップなど)、画面の向きからのエンド ユーザーのニーズを満たすように応答しています。
テスターとして、アプリケーションの応答性をトリガーするために、アプリケーションをさまざまなサイズで配置したい場合があります。
Selenium の新しい CDP 機能を使用してこれを実現するにはどうすればよいでしょうか?
デバイス メトリクスを変更する CDP コマンドは Emulation.setDeviceMetricsOverride で、このコマンドには幅、高さ、モバイル デバイス フラグ、およびデバイス スケーリング係数の入力が必要です。このシナリオではこれら 4 つのキーが必要ですが、オプションのキーもいくつかあります。
Selenium テストでは、DevTools::send() メソッドと組み込みの setDeviceMetricsOverride() コマンドを使用できましたが、この Selenium API は 12 個のパラメータを受け入れます。4 つの必須パラメータに加えて、8 つのオプション パラメータがあります。これら 8 つのオプションのパラメータのうち、送信する必要がないものについては、Optional.empty() を渡すことができます。
ただし、プロセスを簡素化し、必要なパラメーターのみを渡すために、以下のコードでは元のexecuteCdpCommand() メソッドを使用します。
package com.devtools;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import java.util.HashMap;
import java.util.Map;
public class SetDeviceMode {
final static String PROJECT_PATH = System.getProperty("user.dir");
public static void main(String[] args){
System.setProperty("webdriver.chrome.driver", PROJECT_PATH + "/src/main/resources/chromedriver");
ChromeDriver driver;
driver = new ChromeDriver();
DevTools devTools = driver.getDevTools();
devTools.createSession();
Map deviceMetrics = new HashMap()
{
{
put("width", 600);
put("height", 1000);
put("mobile", true);
put("deviceScaleFactor", 50);
}};
driver.executeCdpCommand("Emulation.setDeviceMetricsOverride", deviceMetrics);
driver.get("https://www.google.com");
}
}
19 行目で、このコマンドに必要なキーを含むマップを作成します。
次に、26 行目で、executeCdpCommand() メソッドを呼び出し、「Emulation.setDeviceMetricsOverride」としてのコマンド名と、パラメーターを含むデバイス メトリクス マップの 2 つのパラメーターを渡します。
27 行目で、以下の画像に示すように、指定した仕様をレンダリングする「Google」ホームページを開きます。
Applitools Eyes のようなソリューションを使用すると、これらの新しい Selenium コマンドを使用してさまざまなビューポートで迅速にテストできるだけでなく、大規模な不一致を維持することもできます。Eyes は、ブラウザーやビューポートの違いによる UI の小さな知覚できない変化に対して誤った結果を報告しないほど賢いです。
模擬ロケーション
多くの場合、オファーや位置ベースの価格など、特定の位置ベースの機能をテストする必要があります。このために、DevTools API を使用して位置を模擬できます。
@Test
public void mockLocation(){
devTools.send(Emulation.setGeolocationOverride(
Optional.of(48.8584),
Optional.of(2.2945),
Optional.of(100)));
driver.get("https://mycurrentlocation.net/");
try {
Thread.sleep(30000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
ネットワーク速度をシミュレートする
多くのユーザーは、Wi-Fi または携帯電話ネットワークに接続されたハンドヘルド デバイスを介して Web アプリケーションにアクセスします。ネットワーク信号が弱く、インターネット接続が遅くなるのはよくあることです。
インターネット接続が遅い (2G) 場合やネットワークが断続的に停止する場合は、そのような状況下でアプリケーションがどのように動作するかをテストすることが重要になる場合があります。
ネットワーク接続を偽装する CDP コマンドは、Network.emulateNetworkConditions です。このコマンドの必須およびオプションのパラメータに関する情報は、ドキュメントに記載されています。
これらのシナリオは、Chrome DevTools にアクセスすることでシミュレートできます。これを行う方法を見てみましょう。
package com.devtools;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.network.Network;
import org.openqa.selenium.devtools.network.model.ConnectionType;
import java.util.HashMap;
import java.util.Map;
import java.util.Optional;
public class SetNetwork {
final static String PROJECT_PATH = System.getProperty("user.dir");
public static void main(String[] args){
System.setProperty("webdriver.chrome.driver", PROJECT_PATH + "/src/main/resources/chromedriver");
ChromeDriver driver;
driver = new ChromeDriver();
DevTools devTools = driver.getDevTools();
devTools.createSession();
devTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
devTools.send(Network.emulateNetworkConditions(
false,
20,
20,
50,
Optional.of(ConnectionType.CELLULAR2G)
));
driver.get("https://www.google.com");
}
}
21 行目で、getDevTools() メソッドを呼び出して DevTools オブジェクトを取得します。次に、send() メソッドを呼び出してネットワークを有効にし、再度 send() メソッドを呼び出して、組み込みコマンド Network.emulateNetworkConditions() とこのコマンドで送信するパラメーターを渡します。
最後に、シミュレートされたネットワーク条件を使用して Google ホームページを開きます。
HTTPリクエストをキャプチャする
DevTools を使用すると、アプリケーションによって行われた HTTP リクエストをキャプチャし、メソッド、データ、ヘッダーなどにアクセスできます。
サンプルコードを使用して、HTTP リクエスト、URI、およびリクエスト メソッドをキャプチャする方法を見てみましょう。
package com.devtools;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.network.Network;
import java.util.Optional;
public class CaptureNetworkTraffic {
private static ChromeDriver driver;
private static DevTools chromeDevTools;
final static String PROJECT_PATH = System.getProperty("user.dir");
public static void main(String[] args){
System.setProperty("webdriver.chrome.driver", PROJECT_PATH + "/src/main/resources/chromedriver");
driver = new ChromeDriver();
chromeDevTools = driver.getDevTools();
chromeDevTools.createSession();
chromeDevTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
chromeDevTools.addListener(Network.requestWillBeSent(),
entry -> {
System.out.println("Request URI : " + entry.getRequest().getUrl()+"\n"
+ " With method : "+entry.getRequest().getMethod() + "\n");
entry.getRequest().getMethod();
});
driver.get("https://www.google.com");
chromeDevTools.send(Network.disable());
}
}
ネットワーク トラフィックのキャプチャを開始する CDP コマンドは Network.enable です。このコマンドの必須およびオプションのパラメータに関する情報は、ドキュメントに記載されています。
コードの 22 行目では、DevTools::send() メソッドを使用して Network.enable CDP コマンドを送信し、ネットワーク トラフィックのキャプチャを有効にしています。
行 23 では、アプリケーションによって送信されるすべてのリクエストのリスナーを追加します。アプリケーションによってキャプチャされたリクエストごとに、getRequest().getUrl() で URL を抽出し、getRequest().getMethod() で HTTP メソッドを抽出します。
29 行目で、Google ホームページを開き、このページによって行われたすべてのリクエストの URI と HTTP メソッドをコンソールに出力します。
リクエストのキャプチャが完了したら、30 行目に示すように、Network.disable CDP コマンドを送信してネットワーク トラフィックのキャプチャを停止できます。
HTTP 応答をインターセプトする
応答を傍受するには、Network.responseReceived イベントを使用します。このイベントは、HTTP 応答が利用可能な場合に発生し、URL、応答ヘッダー、応答コードなどをリッスンできます。応答本文を取得するには、Network.getResponseBody メソッドを使用します。
@Test
public void validateResponse() {
final RequestId[] requestIds = new RequestId[1];
devTools.send(Network.enable(Optional.of(100000000), Optional.empty(), Optional.empty()));
devTools.addListener(Network.responseReceived(), responseReceived -> {
if (responseReceived.getResponse().getUrl().contains("api.zoomcar.com")) {
System.out.println("URL: " + responseReceived.getResponse().getUrl());
System.out.println("Status: " + responseReceived.getResponse().getStatus());
System.out.println("Type: " + responseReceived.getType().toJson());
responseReceived.getResponse().getHeaders().toJson().forEach((k, v) -> System.out.println((k + ":" + v)));
requestIds[0] = responseReceived.getRequestId();
System.out.println("Response Body: \n" + devTools.send(Network.getResponseBody(requestIds[0])).getBody() + "\n");
}
});
driver.get("https://www.zoomcar.com/bangalore");
driver.findElement(By.className("search")).click();
}
コンソールログにアクセスする
私たちは皆、障害のデバッグや分析のためにログに依存しています。特定のデータまたは特定の条件を使用してアプリケーションをテストおよび作業する場合、ログはエラー メッセージのデバッグとキャプチャに役立ち、Chrome DevTools のコンソール タブで公開される詳細な洞察が得られます。
以下に示すように CDP log コマンドを呼び出して、Selenium スクリプトを通じてコンソール ログをキャプチャできます。
package com.devtools;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.log.Log;
public class CaptureConsoleLogs {
private static ChromeDriver driver;
private static DevTools chromeDevTools;
final static String PROJECT_PATH = System.getProperty("user.dir");
public static void main(String[] args){
System.setProperty("webdriver.chrome.driver", PROJECT_PATH + "/src/main/resources/chromedriver");
driver = new ChromeDriver();
chromeDevTools = driver.getDevTools();
chromeDevTools.createSession();
chromeDevTools.send(Log.enable());
chromeDevTools.addListener(Log.entryAdded(),
logEntry -> {
System.out.println("log: "+logEntry.getText());
System.out.println("level: "+logEntry.getLevel());
});
driver.get("https://testersplayground.herokuapp.com/console-5d63b2b2-3822-4a01-8197-acd8aa7e1343.php");
}
}
このコードでは、19 行目で DevTools::send() を使用してコンソール ログ キャプチャを有効にしています。
次に、アプリケーションによって記録されたすべてのコンソール ログをキャプチャするリスナーを追加します。アプリケーションによってキャプチャされたログごとに、getText() メソッドを使用してログ テキストを抽出し、getLevel() メソッドを使用してログ レベルを抽出します。
最後に、アプリケーションを開き、アプリケーションによって発行されたコンソール エラー ログを取得します。
パフォーマンス指標の取得
今日のペースの速い世界では、ソフトウェアを非常に高い速度で繰り返し構築するため、パフォーマンスのボトルネックも繰り返し検出する必要があります。Web サイトのパフォーマンスが低く、ページの読み込みが遅いと、顧客は不満を感じます。
ビルドごとにこれらのメトリクスを検証できますか? はい、できます!
パフォーマンス メトリクスをキャプチャする CDP コマンドは、Performance.enable です。このコマンドに関する情報はドキュメントに記載されています。
Selenium 4 と Chrome DevTools API でこれをどのように実行できるかを見てみましょう。
package com.devtools;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.performance.Performance;
import org.openqa.selenium.devtools.performance.model.Metric;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;
public class GetMetrics {
final static String PROJECT_PATH = System.getProperty("user.dir");
public static void main(String[] args){
System.setProperty("webdriver.chrome.driver", PROJECT_PATH + "/src/main/resources/chromedriver");
ChromeDriver driver = new ChromeDriver();
DevTools devTools = driver.getDevTools();
devTools.createSession();
devTools.send(Performance.enable());
driver.get("https://www.google.org");
List<Metric> metrics = devTools.send(Performance.getMetrics());
List<String> metricNames = metrics.stream()
.map(o -> o.getName())
.collect(Collectors.toList());
devTools.send(Performance.disable());
List<String> metricsToCheck = Arrays.asList(
"Timestamp", "Documents", "Frames", "JSEventListeners",
"LayoutObjects", "MediaKeySessions", "Nodes",
"Resources", "DomContentLoaded", "NavigationStart");
metricsToCheck.forEach( metric -> System.out.println(metric +
" is : " + metrics.get(metricNames.indexOf(metric)).getValue()));
}
}
まず、19 行目に示すように、DevTools createSession() メソッドを呼び出してセッションを作成します。
次に、20 行目に示すように、Performance.enable() コマンドを send() に送信することで、DevTools がパフォーマンス メトリクスをキャプチャできるようにします。
パフォーマンス キャプチャが有効になったら、アプリケーションを開いて Performance.getMetrics() コマンドを send() に送信できます。これにより、25 行目に示すように、Metric オブジェクトのリストが返されます。これをストリーミングして、キャプチャされたすべてのメトリクスの名前を取得できます。
次に、29 行目に示すように、Performance.disable() コマンドを send() に送信して、パフォーマンス キャプチャを無効にします。
関心のあるメトリクスを確認するには、metricsToCheck というリストを定義し、リストをループしてメトリクスの値を出力します。
基本認証
Selenium では、DOM 要素とのみ対話できるため、ブラウザーのポップアップと対話する方法はありません。これは、認証ダイアログなどのポップアップに課題をもたらします。
CDP API を使用して DevTools で認証を直接処理することで、この問題を回避できます。リクエストの追加ヘッダーを設定する CDP コマンドは、Network.setExtraHTTPHeaders です。
Selenium 4 でこのコマンドを呼び出す方法は次のとおりです。
package com.devtools;
import org.apache.commons.codec.binary.Base64;
import org.openqa.selenium.By;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.network.Network;
import org.openqa.selenium.devtools.network.model.Headers;
import java.util.HashMap;
import java.util.Map;
import java.util.Optional;
public class SetAuthHeader {
private static final String USERNAME = "guest";
private static final String PASSWORD = "guest";
final static String PROJECT_PATH = System.getProperty("user.dir");
public static void main(String[] args){
System.setProperty("webdriver.chrome.driver", PROJECT_PATH + "/src/main/resources/chromedriver");
ChromeDriver driver = new ChromeDriver();
//Create DevTools session and enable Network
DevTools chromeDevTools = driver.getDevTools();
chromeDevTools.createSession();
chromeDevTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
//Open website
driver.get("https://jigsaw.w3.org/HTTP/");
//Send authorization header
Map<String, Object> headers = new HashMap<>();
String basicAuth ="Basic " + new String(new Base64().encode(String.format("%s:%s", USERNAME, PASSWORD).getBytes()));
headers.put("Authorization", basicAuth);
chromeDevTools.send(Network.setExtraHTTPHeaders(new Headers(headers)));
//Click authentication test - this normally invokes a browser popup if unauthenticated
driver.findElement(By.linkText("Basic Authentication test")).click();
String loginSuccessMsg = driver.findElement(By.tagName("html")).getText();
if(loginSuccessMsg.contains("Your browser made it!")){
System.out.println("Login successful");
}else{
System.out.println("Login failed");
}
driver.quit();
}
}
まず、DevTools オブジェクトとのセッションを作成し、ネットワークを有効にします。これは 25 ~ 26 行目に示されています。
次に、Web サイトを開き、送信用の認証ヘッダーを作成します。
35 行目で、setExtraHTTPHeaders コマンドをヘッダーのデータとともに send() に送信します。この部分は私たちを認証し、ブラウザーのポップアップをバイパスできるようにします。
この機能をテストするために、[Basic Authentication Test] リンクをクリックしました。これを手動で試行すると、ログインを求めるブラウザのポップアップが表示されます。ただし、認証ヘッダーを送信するため、このポップアップはスクリプトには表示されません。
代わりに、「ブラウザは正常にログインしました!」というメッセージが表示されます。
要約する
Selenium は、CDP API の追加によりさらに強力になりました。テストを強化して、HTTP ネットワーク トラフィックのキャプチャ、パフォーマンス メトリクスの収集、認証の処理、地理位置情報、タイムゾーン、デバイス モードのシミュレーションを行うことができるようになりました。その他、Chrome DevTools に表示される可能性のあるものはすべてあります。
リンク: https://zhuanlan.zhihu.com/p/639947455
最後に:以下の完全なソフトウェア テスト ビデオ チュートリアルが整理されてアップロードされており、必要な友人はソフトウェア テストのインタビュー文書を自分で入手できます。【保100%免费】
私たちは高給の仕事を見つけるために勉強しなければなりません。次の面接の質問は、アリ、テンセント、バイトなどの一流インターネット企業からの最新の面接資料であり、一部のバイトの上司が権威ある回答をしています。このセットを完了してください。面接資料は誰もが満足のいく仕事を見つけることができると信じています。