【初心者向け】SeleniumでCSSセレクターをロケーターとして使う方法を徹底解説

Selenium WebDriverでは、CSSセレクターをロケーターとして利用することで、ページ上の要素を柔軟かつ正確に特定できます。CSS式の基本的な書式は「tagname[attribute='value']」ですが、id属性やclass属性を活用すると、より簡潔なセレクターを作成可能です。

CSSセレクターの基本構文

id属性を使う場合

id属性を利用する場合のCSS式の書式は「tagname#id」です。たとえば「input#txt-loc」というCSS式では、「input」がタグ名、「txt-loc」がid属性の値を表します。

class属性を使う場合

class属性を利用する場合の書式は「tagname.class」です。たとえば「input.txt-cls」では、「input」がタグ名、「txt-cls」がclass属性の値となります。

n番目の子要素を指定する

あるWeb要素（親要素）の中に複数の子要素があり、そのうちn番目の子要素を特定したい場合は、「nth-of-type(n)」という書式を使用します。

上記のHTMLを例にすると、親要素ulの4番目のli要素（テキストが「Questions and Answers」であるアンカー要素）を特定したい場合は、次のように記述します。

ul.reading li:nth-of-type(4)

同様に、最後の子要素を指定したい場合は「ul.reading li:last-child」を使用します。

動的な属性値への対応方法

属性値が動的に変化する要素に対しては、部分一致の演算子を使うことで効率的に要素を特定できます。

前方一致： ^=

「^=」は、属性値が特定のテキストで始まる要素を特定します。
例：input[name^='qa1']（inputがタグ名で、name属性の値がqa1から始まる場合）

後方一致： $=

「$=」は、属性値が特定のテキストで終わる要素を特定します。
例：input[class$='loc']（inputがタグ名で、class属性の値がlocで終わる場合）

部分一致： *=

「*=」は、属性値が特定の文字列を含む要素を特定します。
例：input[name*='sub']（inputがタグ名で、name属性の値にsubという部分文字列を含む場合）

Javaでの実装例

以下は、FirefoxDriverを使ってLinkedInのログインページを開き、CSSセレクターで入力フィールドを特定してテキストを送信するサンプルコードです。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import java.util.concurrent.TimeUnit;
public class CSSLocator{
    public static void main(String[] args) {
        System.setProperty("webdriver.gecko.driver",
        "C:\\Users\\ghs6kor\\Desktop\\Java\\geckodriver.exe");
        WebDriver driver = new FirefoxDriver();
        // 暗黙的待機
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        // URLを起動
        driver.get("https://www.linkedin.com/");
        // 要素を特定
        WebElement m = driver.
        findElement(By.cssSelector("input[id='session_key']"));
        // テキストを入力
        m.sendKeys("Java");
        String s = m.getAttribute("value");
        System.out.println("Attribute value: " + s);
        // ブラウザを閉じる
        driver.close();
    }
}

このように、CSSセレクターをマスターすれば、idやclassだけでなく、階層構造や動的な属性値にも対応した堅牢なロケーターを作成でき、自動テストの安定性向上につながります。