CSSセレクター式の作成方法まとめ！class・id・属性値を使った3つの指定テクニック

CSSセレクター式の主な作成方法

SeleniumでWeb要素を特定する際、CSSセレクター式を活用すると柔軟かつ効率的に要素を取得できます。ここでは、実務でよく使われる代表的な3つの指定方法を紹介します。

1. class（クラス名）をセレクターとして指定する

指定したクラス名を持つすべてのWeb要素を選択できます。CSSではクラスはドット（.）で表現します。
記述例：.classname

2. idをセレクターとして指定する

ページ内で一意となるidを持つWeb要素を選択できます。idはシャープ（#）で表現します。
記述例：#ID

3. タグ名と属性値の組み合わせで指定する

タグ名と属性値の組み合わせに一致するWeb要素を選択できます。属性は角括弧の中に「属性名='値'」の形式で記述します。
記述例：tagname[attribute='value']

実装例1：classセレクターを使用する場合

ドット（.）に続けてクラス名を指定することで、該当クラスの要素に入力を行っています。

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class CssExpression {
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url = "https://www.tutorialspoint.com/index.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // ドット（.）でクラスを指定したCSSセレクター式
      driver.findElement(By.cssSelector(".gsc-input")).sendKeys("Selenium");
      driver.close();
   }
}

実装例2：idセレクターを使用する場合

シャープ（#）に続けてidを指定することで、一意の要素に対して操作を実行しています。

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class CssId {
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url = "https://www.tutorialspoint.com/index.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // シャープ（#）でidを指定したCSSセレクター式
      driver.findElement(By.cssSelector("#gsc-i-id1")).sendKeys("Selenium");
      driver.close();
   }
}

実装例3：タグ名と属性値の組み合わせを使用する場合

タグ名「input」と属性「name='search'」を組み合わせることで、より具体的に要素を絞り込んでいます。

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class CssTagExp {
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url = "https://www.tutorialspoint.com/index.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // タグ名＋属性値の組み合わせによるCSSセレクター式
      driver.findElement(By.cssSelector("input[name='search']")).sendKeys("Selenium");
      driver.close();
   }
}

まとめ

CSSセレクター式は、class（.）、id（#）、タグ名＋属性値の3つのアプローチを使い分けることで、ほとんどのWeb要素を正確に特定できます。特にidは一意性が高いため確実な操作に向き、classや属性値の組み合わせは複数要素や動的なページでの柔軟な指定に役立ちます。自動テストの安定性向上のためにも、状況に応じた使い分けを心がけましょう。