SeleniumでHTML要素のdisplayスタイルを設定する方法を解説

Selenium WebDriverを使用すると、HTML要素のCSSの display スタイルを設定することができます。Webページ上の要素は、DOM（Document Object Model）を通じてJavaScriptと連携して操作されます。Seleniumは executeScript メソッドを使ってJavaScriptコマンドを実行でき、実行したいコマンドはメソッドの引数として渡します。

要素のdisplayスタイルの設定のような操作は、Javascript Executor を使って行うのが一般的です。まず getElementById メソッドで対象の要素を特定し、そのWebElementに対して style.display を適用することで、表示タイプを設定できます。

基本構文

executor.executeScript
("document.getElementById('gsc-i-id1').style.display='block';");

コード例

以下にJavaでの実装例を示します。このコードでは、ChromeDriverを使ってページを開き、JavascriptExecutor経由で指定IDの要素のdisplayプロパティを「block」に変更しています。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.JavascriptExecutor;
public class ElementStyleSet{
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.tutorialspoint.com/index.htm");
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        // JavascriptExecutorクラスとexecuteScriptメソッドを使用
        JavascriptExecutor j = (JavascriptExecutor) driver;
        // style.displayメソッドで表示タイプを設定
        j.executeScript ("document.getElementById('gsc-i-id1').style.display='block';");
        driver.close()
    }
}

ポイントまとめ

• Selenium単体では直接CSSを操作できないため、JavaScriptの実行が必要になる場面があります。
• JavascriptExecutor インターフェースにWebDriverをキャストして使用します。
• displayの値は「block」「none」「inline」など、通常のCSSと同じ値を指定できます。
• 非表示要素（display:none）を一時的に表示させて操作したい場合などに特に有効な手法です。