【ソフトウェアテスト/自動テスト】WebDriver+Seleniumでブラウザ自動化を実現

 目次

序文

使用するシーン

原理

環境整備

 開発する

最初のスクリプト

WebDriver API

ブラウザ

要素

要約する

---

序文

Selenium はブラウザの操作を自動化できるオープン ソース プロジェクトであり、本来の目的はブラウザの機能のテストを自動化することですが、プロジェクトの発展に伴い、その特性に応じてさらに興味深い機能を実行するためにも使用されるようになりました。 UI の自動テスト ツールです。Selenium の公式 Web サイトに記載されているように、Selenium はブラウザの操作を自動化できます。終わりました！その能力を使って何をしたいかは完全にあなた次第です。

使用するシーン

ブラウザの自動テストには 3 つのシナリオがあります。

• Selenium WebDriver: 堅牢なブラウザベースの回帰自動化スイートとテストを作成し、スクリプトを多くの環境に拡張して配布したい場合は、ブラウザを駆動するための言語固有のバインディングのセットである Selenium WebDriver を使用する必要があります。これが意味します。運転する
• Selenium IDE: 迅速なバグ再現スクリプトを作成したり、探索的テストの自動化に役立つスクリプトを作成したりする場合は、簡単なログ記録と再生を可能にする Chrome、Firefox、Edge プラグインである Selenium IDE を使用します。
• Selenium Grid: 多数のブラウザと OS の組み合わせに対してテストを簡単に実行できるように、テストを複数のマシンに分散して実行することで、中央点から複数の環境を拡張および管理したい場合は、Selenium Grid を使用する必要があります。

原理

初期の Selenium の目的は、Web アプリケーションの UI 自動テストを実現することでした。その実装方法は、ブラウザの動作を制御する目的を達成するために、サードパーティのサーバーを介して js を注入することでした。コアコンポーネントは Selenium-RC (リモート コントロール) と呼ばれ、これは 2 つの部分で構成されます。

• クライアント側でコントロールブラウザロジックを記述するためのライブラリ
• ブラウザの起動と終了を制御するサーバーを実装します。

構造は次のとおりです 

  このアーキテクチャは複雑であり、次のような多くの制限があることが判明しました。

• 複雑なアーキテクチャ
• Selenium RC はブラウザへの指示として JavaScript コマンドを使用するため、テスト スクリプトの実行には時間がかかります。これによりパフォーマンスが低下する可能性があります
• API はあまりオブジェクト指向ではありません
• ヘッドレス HTMLUnit ブラウザはサポートされていません (非表示ブラウザ)

Selenium RC の制限により、新しい自動化フレームワークである Selenium WebDriver が開発されました。2006 年の WebDriver の導入以降、RC の複雑な問題は解決され、Selenium と WebDriver を組み合わせることでブラウザの制御動作が簡素化され、中間リンクのサーバーが削除され、システム レベルでブラウザをローカルに直接制御できるようになりました。最適化されたアーキテクチャは次のとおりです。 

環境整備

コーディング層で関数を実装したくない場合は、記録の再生とプロセス スクリプトのエクスポートをサポートするSelenium IDEプラグインをダウンロードできます。 

 コードを通じてより柔軟なカスタム関数を実装する必要がある場合は、Python を使用し、環境に合わせて python3 と pip3 を準備することをお勧めします。

brew install python3

セレン

pip3 install selenium

ブラウザ ドライバをインストールすると、ブラウザの自動化が可能になるようにシステムが設定されます。Selenium は WebDriver を通じて、Chrome/Chromium、Firefox、Internet Explorer、Edge、Opera、Safari などの市場の主要なブラウザをすべてサポートします。可能な場合、WebDriver はブラウザーの組み込みオートメーション サポートを使用してブラウザーを駆動します。 

 開発する

最初のスクリプト

Webドライバーによるブラウザ自動アクセス機能の制御

def test_eight_components():
    driver = webdriver.Chrome()
    
    driver.get("https://google.com")
    
    title = driver.title
    assert title == "Google"
    
    driver.implicitly_wait(0.5)
    
    search_box = driver.find_element(by=By.NAME, value="q")
    search_button = driver.find_element(by=By.NAME, value="btnK")
    
    search_box.send_keys("Selenium")
    search_button.click()
    
    search_box = driver.find_element(by=By.NAME, value="q")
    value = search_box.get_attribute("value")
    assert value == "Selenium"
    
    driver.quit()

WebDriver API

webDriver のブラウザを操作するための API は大きく 2 つの部分に分けられ、開く、閉じる、進む、戻る、更新などのブラウザの動作を制御する部分と、クリック、入力、要素コンテンツの取得などのページ要素を制御する部分に分かれます。

ブラウザ

ブラウザ情報を取得する

// title driver.getTitle(); // url driver.getCurrentUrl();

ナビゲーション

//打开
driver.get("https://selenium.dev");

//跳转
driver.navigate().to("https://selenium.dev");

// 后退
driver.navigate().back();

// 前进
driver.navigate().forward();

// 刷新
driver.navigate().refresh();

弾丸箱

//根据条件找到页面中的弹框并点击
driver.findElement(By.linkText("See an example alert")).click();

//等待弹框展示并保存到变量中
Alert alert = wait.until(ExpectedConditions.alertIsPresent());

//获得弹框内容文本
String text = alert.getText();

//点击确定按钮
alert.accept();

Cookieと同様のアラート、確認、プロンプト機能で  Cookie の追加と削除をサポートできます。

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;

public class addCookie {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("http://www.example.com");

            // Adds the cookie into current browser context
            driver.manage().addCookie(new Cookie("key", "value"));
        } finally {
            driver.quit();
        }
    }
}

フレームは、 フレーム内の要素の取得と操作をサポートします。Windows  WebDriver はウィンドウとタブを区別しません。サイトで新しいタブまたはウィンドウが開いた場合、Selenium ではウィンドウ ハンドルを使用してそれを処理できるようになります。各ウィンドウには一意の識別子があり、単一セッション内では一定のままです。現在のウィンドウのウィンドウ ハンドルは次のコマンドで取得できます。

driver.getWindowHandle();

要素

DOM 内の要素の識別と使用 Selenium コードの多くには、Web 要素の操作が含まれます。関数のこの部分は、フロントエンド コードを記述する際の document.getElementById に似ています。アイデアは比較的単純です。ページ内の要素を見つけて、ユーザーの動作をシミュレートする操作を実行することです。絶対配置と相対的な配置戦略です。複雑なページ ID、タグ、クラスには適していません。非常に柔軟な xPath メソッドを配置に使用できます。実際、丸暗記する必要はありません。特定の要素が配置されたとき、見つけるのは簡単ではありませんが、公式 Web サイトにアクセスして API を確認してください。

相対的な位置決め

def relative():
    # Above
    email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
    # Below
    password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
    # Left of
    cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"})
    # Right of
    submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"})
    # Near
    email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
    # Chaining relative locators
    submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_right_of({By.ID: "cancel"})

従来のポジショニング

<ol id="vegetables" style="margin-top: 20px">
      <li class="potatoes">potatoes</li>
      <li class="onions">onions</li>
      <li class="tomatoes"><span>Tomato is a Vegetable</span></li>
    </ol>
    <ul id="fruits">
      <li class="bananas"></li>
      <li class="apples"></li>
      <li class="tomatoes"><span>Tomato is a Fruit</span></li>
     </ul>

def finders():
    # Evaluating entire DOM
    vegetable = driver.find_element(By.CLASS_NAME, "tomatoes")
    print(vegetable)
    # Evaluating a subset of the DOM
    fruits = driver.find_element(By.ID, "fruits")
    fruit = fruits.find_elements(By.CLASS_NAME, "tomatoes")
    print(fruit)
    # Optimized locator
    fruit = driver.find_element(By.CSS_SELECTOR, "#fruits .tomatoes")
    fruit2 = driver.find_element(By.CSS_SELECTOR, "ul .tomatoes")
    print(fruit == fruit2) # True
    # All matching elements
    plants = driver.find_elements(By.TAG_NAME, "li")
    print(plants)
    # Get all the elements available with tag name 'p'
    elements = driver.find_elements(By.TAG_NAME, 'span')
    for e in elements:
        print(e.text)


def xPath():
    ol = driver.find_element(By.XPATH, "/html/body/div/div/ol[1]")
    ol2 = driver.find_element(By.XPATH, "//ol[1]")
    ol3 = driver.find_element(By.XPATH, "//ol[@id='vegetables']")
    print(ol == ol2) # True
    print(ol == ol3) # True
    onions = driver.find_element(By.XPATH, "//ol[1]/li[2]")
    print(onions.text)

5 つの基本的なコマンドを操作します 。

• (任意の要素) をクリックします
• キーを送信します (テキスト ブロックおよびコンテンツ編集可能な要素のみ)
• クリア（同上）
• submit (フォーム要素)
• select (リスト要素を選択)

要素情報を取得する 

要約する

この共有では、Selenium の使用シナリオ、簡単な原則、およびいくつかの基本的な使用法を紹介します。そして小さな例を挙げました。上記の内容をマスターすると、基本的な UI 自動テストを実装できるようになります。また、一部のクローラやブラウザ操作を自動化できるツールの要件は、個々のシナリオに応じてカスタマイズする必要がありますが、「怠け者」の性質がある限り、それを使用する興味深いシナリオがたくさん見つかると思います。

---

～方法は必ずある、そうすれば成功する～最後に、皆さんができるだけ早くテストの天井に到達することを願っています。

一人で大きく成長したくない場合、システム情報が見つからない場合、問題の解決策が得られない場合、数日間粘っても諦めた場合は、Q スカート : 321255410 に参加するか、小さなカードをクリックしてください。以下に を追加してください。全員でディスカッションやコミュニケーションを行うことができ、さまざまなソフトウェアのテスト資料や技術交流が行われます。

今日は主に私の学習経験とネットワーク ディスク学習リソースの一部を共有します。今後も関連するテスト資料を共有し続けます。助けてもらった友人がいる場合は、「いいね」を押してサポートしてください~