これは、このセクションの複数ページの印刷可能なビューです。印刷するには、ここをクリックしてください.

サポート機能

サポートクラスは、オプションの上位レベル機能を提供します。

1: Waiting with Expected Conditions
2: Command Listeners
3: 色を扱う
4: 選択要素の操作
5: ThreadGuard

The core libraries of Selenium try to be low level and non-opinionated. The Support classes in each language provide opinionated wrappers for common interactions that may be used to simplify some behaviors.

1 - Waiting with Expected Conditions

These are classes used to describe what needs to be waited for.

Expected Conditions are used with Explicit Waits. Instead of defining the block of code to be executed with a lambda, an expected conditions method can be created to represent common things that get waited on. Some methods take locators as arguments, others take elements as arguments.

These methods can include conditions such as:

element exists
element is stale
element is visible
text is visible
title contains specified value

Expected Conditions Documentation

Add Example

[Expected Conditions Documentation](https://www.selenium.dev/selenium/docs/api/py/webdriver_support/selenium.webdriver.support.expected_conditions.html)

Add Example

.NET stopped supporting Expected Conditions in Selenium 4 to minimize maintenance hassle and redundancy.

Ruby makes frequent use of blocks, procs and lambdas and does not need Expected Conditions classes

Add Example

2 - Command Listeners

These allow you to execute custom actions in every time specific Selenium commands are sent

Add Example

3 - 色を扱う

テストの一部として何かの色を検証したい場合があります。問題は、ウェブ上の色の定義が一定ではないことです。色のHEX表現を色のRGB表現と比較する簡単な方法、または色のRGBA表現を色のHSLA表現と比較する簡単な方法があったらいいのではないでしょうか？

心配しないでください。解決策があります。: Color クラスです！

まず、クラスをインポートする必要があります。

import org.openqa.selenium.support.Color;

from selenium.webdriver.support.color import Color

// This feature is not implemented - Help us by sending a pr to implement this feature

include Selenium::WebDriver::Support

// This feature is not implemented - Help us by sending a pr to implement this feature

import org.openqa.selenium.support.Color

これで、カラーオブジェクトの作成を開始できます。すべての色オブジェクトは、色の文字列表現から作成する必要があります。サポートされている色表現は、以下のとおりです。

private final Color HEX_COLOUR = Color.fromString("#2F7ED8");
private final Color RGB_COLOUR = Color.fromString("rgb(255, 255, 255)");
private final Color RGB_COLOUR = Color.fromString("rgb(40%, 20%, 40%)");
private final Color RGBA_COLOUR = Color.fromString("rgba(255, 255, 255, 0.5)");
private final Color RGBA_COLOUR = Color.fromString("rgba(40%, 20%, 40%, 0.5)");
private final Color HSL_COLOUR = Color.fromString("hsl(100, 0%, 50%)");
private final Color HSLA_COLOUR = Color.fromString("hsla(100, 0%, 50%, 0.5)");

HEX_COLOUR = Color.from_string('#2F7ED8')
RGB_COLOUR = Color.from_string('rgb(255, 255, 255)')
RGB_COLOUR = Color.from_string('rgb(40%, 20%, 40%)')
RGBA_COLOUR = Color.from_string('rgba(255, 255, 255, 0.5)')
RGBA_COLOUR = Color.from_string('rgba(40%, 20%, 40%, 0.5)')
HSL_COLOUR = Color.from_string('hsl(100, 0%, 50%)')
HSLA_COLOUR = Color.from_string('hsla(100, 0%, 50%, 0.5)')

// This feature is not implemented - Help us by sending a pr to implement this feature

HEX_COLOUR = Color.from_string('#2F7ED8')
RGB_COLOUR = Color.from_string('rgb(255, 255, 255)')
RGB_COLOUR = Color.from_string('rgb(40%, 20%, 40%)')
RGBA_COLOUR = Color.from_string('rgba(255, 255, 255, 0.5)')
RGBA_COLOUR = Color.from_string('rgba(40%, 20%, 40%, 0.5)')
HSL_COLOUR = Color.from_string('hsl(100, 0%, 50%)')
HSLA_COLOUR = Color.from_string('hsla(100, 0%, 50%, 0.5)')

// This feature is not implemented - Help us by sending a pr to implement this feature

private val HEX_COLOUR = Color.fromString("#2F7ED8")
private val RGB_COLOUR = Color.fromString("rgb(255, 255, 255)")
private val RGB_COLOUR_PERCENT = Color.fromString("rgb(40%, 20%, 40%)")
private val RGBA_COLOUR = Color.fromString("rgba(255, 255, 255, 0.5)")
private val RGBA_COLOUR_PERCENT = Color.fromString("rgba(40%, 20%, 40%, 0.5)")
private val HSL_COLOUR = Color.fromString("hsl(100, 0%, 50%)")
private val HSLA_COLOUR = Color.fromString("hsla(100, 0%, 50%, 0.5)")

Colorクラスは、 http://www.w3.org/TR/css3-color/#html4 で指定されているすべての基本色定義もサポートしています。

private final Color BLACK = Color.fromString("black");
private final Color CHOCOLATE = Color.fromString("chocolate");
private final Color HOTPINK = Color.fromString("hotpink");

BLACK = Color.from_string('black')
CHOCOLATE = Color.from_string('chocolate')
HOTPINK = Color.from_string('hotpink')

// This feature is not implemented - Help us by sending a pr to implement this feature

BLACK = Color.from_string('black')
CHOCOLATE = Color.from_string('chocolate')
HOTPINK = Color.from_string('hotpink')

// This feature is not implemented - Help us by sending a pr to implement this feature

private val BLACK = Color.fromString("black")
private val CHOCOLATE = Color.fromString("chocolate")
private val HOTPINK = Color.fromString("hotpink")

要素に色が設定されていない場合、ブラウザは “透明” の色の値を返すことがあります。 Colorクラスもこれをサポートしています。

private final Color TRANSPARENT = Color.fromString("transparent");

TRANSPARENT = Color.from_string('transparent')

// This feature is not implemented - Help us by sending a pr to implement this feature

TRANSPARENT = Color.from_string('transparent')

// This feature is not implemented - Help us by sending a pr to implement this feature

private val TRANSPARENT = Color.fromString("transparent")

レスポンスが正しく解析され、有効なColorオブジェクトに変換されることを認識して、要素を安全にクエリしてその色/背景色を取得できるようになりました。

Color loginButtonColour = Color.fromString(driver.findElement(By.id("login")).getCssValue("color"));

Color loginButtonBackgroundColour = Color.fromString(driver.findElement(By.id("login")).getCssValue("background-color"));

login_button_colour = Color.from_string(driver.find_element(By.ID,'login').value_of_css_property('color'))

login_button_background_colour = Color.from_string(driver.find_element(By.ID,'login').value_of_css_property('background-color'))

// This feature is not implemented - Help us by sending a pr to implement this feature

login_button_colour = Color.from_string(driver.find_element(id: 'login').css_value('color'))

login_button_background_colour = Color.from_string(driver.find_element(id: 'login').css_value('background-color'))

// This feature is not implemented - Help us by sending a pr to implement this feature

val loginButtonColour = Color.fromString(driver.findElement(By.id("login")).getCssValue("color"))

val loginButtonBackgroundColour = Color.fromString(driver.findElement(By.id("login")).getCssValue("background-color"))

そして、色オブジェクトを直接比較できます。

assert loginButtonBackgroundColour.equals(HOTPINK);

assert login_button_background_colour == HOTPINK

// This feature is not implemented - Help us by sending a pr to implement this feature

assert(login_button_background_colour == HOTPINK)

// This feature is not implemented - Help us by sending a pr to implement this feature

assert(loginButtonBackgroundColour.equals(HOTPINK))

または、色を次の形式のいずれかに変換し、静的に検証することができます。

assert loginButtonBackgroundColour.asHex().equals("#ff69b4");
assert loginButtonBackgroundColour.asRgba().equals("rgba(255, 105, 180, 1)");
assert loginButtonBackgroundColour.asRgb().equals("rgb(255, 105, 180)");

assert login_button_background_colour.hex == '#ff69b4'
assert login_button_background_colour.rgba == 'rgba(255, 105, 180, 1)'
assert login_button_background_colour.rgb == 'rgb(255, 105, 180)'

// This feature is not implemented - Help us by sending a pr to implement this feature

assert(login_button_background_colour.hex == '#ff69b4')
assert(login_button_background_colour.rgba == 'rgba(255, 105, 180, 1)')
assert(login_button_background_colour.rgb == 'rgb(255, 105, 180)')

// This feature is not implemented - Help us by sending a pr to implement this feature

assert(loginButtonBackgroundColour.asHex().equals("#ff69b4"))
assert(loginButtonBackgroundColour.asRgba().equals("rgba(255, 105, 180, 1)"))
assert(loginButtonBackgroundColour.asRgb().equals("rgb(255, 105, 180)"))

色はもはや問題ではありません。

4 - 選択要素の操作

選択リストには、他の要素と比較して特別な動作があります。

The Select object will now give you a series of commands that allow you to interact with a <select> element.

If you are using Java or .NET make sure that you’ve properly required the support package in your code. See the full code from GitHub in any of the examples below.

Note that this class only works for HTML elements select and option. It is possible to design drop-downs with JavaScript overlays using div or li, and this class will not work for those.

Types

Select methods may behave differently depending on which type of <select> element is being worked with.

Single select

This is the standard drop-down object where one and only one option may be selected.

<select name="selectomatic">
    <option selected="selected" id="non_multi_option" value="one">One</option>
    <option value="two">Two</option>
    <option value="four">Four</option>
    <option value="still learning how to count, apparently">Still learning how to count, apparently</option>
</select>

Multiple select

This select list allows selecting and deselecting more than one option at a time. This only applies to <select> elements with the multiple attribute.

<select name="multi" id="multi" multiple="multiple">
    <option selected="selected" value="eggs">Eggs</option>
    <option value="ham">Ham</option>
    <option selected="selected" value="sausages">Sausages</option>
    <option value="onion gravy">Onion gravy</option>
</select>

Create class

First locate a <select> element, then use it to initialize a Select object. Note that as of Selenium 4.5, you can’t create a Select object if the <select> element is disabled.

        WebElement selectElement = driver.findElement(By.name("selectomatic"));
        Select select = new Select(selectElement);

Show full example

package dev.selenium.support;

import dev.selenium.BaseChromeTest;
import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.Select;

import java.util.ArrayList;
import java.util.List;

public class SelectListTest extends BaseChromeTest {

    @BeforeEach
    public void navigate() {
        driver.get("https://www.selenium.dev/selenium/web/formPage.html");
    }

    @Test
    public void selectOption() {
        WebElement selectElement = driver.findElement(By.name("selectomatic"));
        Select select = new Select(selectElement);

        WebElement twoElement = driver.findElement(By.cssSelector("option[value=two]"));
        WebElement fourElement = driver.findElement(By.cssSelector("option[value=four]"));
        WebElement countElement = driver.findElement(By.cssSelector("option[value='still learning how to count, apparently']"));

        select.selectByVisibleText("Four");
        Assertions.assertTrue(fourElement.isSelected());

        select.selectByValue("two");
        Assertions.assertTrue(twoElement.isSelected());

        select.selectByIndex(3);
        Assertions.assertTrue(countElement.isSelected());
    }

    @Test
    public void selectMultipleOption() {
        WebElement selectElement = driver.findElement(By.name("multi"));
        Select select = new Select(selectElement);

        WebElement hamElement = driver.findElement(By.cssSelector("option[value=ham]"));
        WebElement gravyElement = driver.findElement(By.cssSelector("option[value='onion gravy']"));
        WebElement eggElement = driver.findElement(By.cssSelector("option[value=eggs]"));
        WebElement sausageElement = driver.findElement(By.cssSelector("option[value='sausages']"));

        List<WebElement> optionElements = selectElement.findElements(By.tagName("option"));
        List<WebElement> optionList = select.getOptions();
        Assertions.assertEquals(optionElements, optionList);

        List<WebElement> selectedOptionList = select.getAllSelectedOptions();
        List<WebElement> expectedSelection = new ArrayList<WebElement>() {{
            add(eggElement);
            add(sausageElement);
        }};
        Assertions.assertEquals(expectedSelection, selectedOptionList);

        select.selectByValue("ham");
        select.selectByValue("onion gravy");
        Assertions.assertTrue(hamElement.isSelected());
        Assertions.assertTrue(gravyElement.isSelected());

        select.deselectByValue("eggs");
        select.deselectByValue("sausages");
        Assertions.assertFalse(eggElement.isSelected());
        Assertions.assertFalse(sausageElement.isSelected());
    }

    @Test
    public void disabledOption() {
        WebElement selectElement = driver.findElement(By.name("single_disabled"));
        Select select = new Select(selectElement);

        Assertions.assertThrows(UnsupportedOperationException.class, () -> {
            select.selectByValue("disabled");
        });
    }
}

サポート機能

1 - Waiting with Expected Conditions

2 - Command Listeners

3 - 色を扱う

4 - 選択要素の操作

Types

Single select

Multiple select

Create class

List options

All options

Selected options

Select option

Text

Value

Index

Disabled options

De-select option

5 - ThreadGuard

注意:

Development Partners

Selenium Level Sponsors

Support the Selenium Project