Selenium - その他のショー操作の紹介

開発 2023-08-02 08:56:22 訪問数: null

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 に表示される可能性のあるものはすべてあります。

最後に:熱心なファンに恩返しするために、完全なソフトウェア テスト ビデオ学習チュートリアルを作成しました。必要な場合は、無料で入手できます。【保证100%免费】
ここに画像の説明を挿入

ソフトウェアテストの面接ドキュメント

私たちは高給の仕事を見つけるために勉強しなければなりません。次の面接の質問は、アリ、テンセント、バイトなどの一流インターネット企業からの最新の面接資料であり、一部のバイトの上司が権威ある回答をしています。このセットを完了してください。面接資料は誰もが満足のいく仕事を見つけることができると信じています。

ここに画像の説明を挿入
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/m0_67695717/article/details/132021951
おすすめ
Arc Browser for Windows 1.0 が正式に提供開始
1990 年代生まれのプログラマーがビデオ移植ソフトウェアを開発し、1 年足らずで 700 万以上の利益を上げました。結末は非常に懲罰的でした。
ランキング
パフォーマンスプロファイラを実装する機能のようなCPPマクロ| C ++コードのパフォーマンステストを簡素化するためにマクロを使用する方法
クリック率を推定するための「特効薬」はありませんが、モデル構造よりも重要なことは何ですか？
Flink的重启策略（RestartStrategy）实战
Implementado en base a la tecnología de reconocimiento de huellas de voz Qualcomm SOC
Android custom encryption and decryption for playing audio and video (m3u8 independent encryption)
Oracleマルチテーブル結合クエリ、統計的合計、グループ化
MapReduceのワークフローと動作原理
ボタンを複数回押したときはどうすればサウンドのオーバーラップをすることができますか？
導出と理解SVM
Mac に Appium をインストールする
アーカイブ
もっと
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)

コードワールド

© 2018 codetd.com