Selenium+Java操作pigu.lt单选按钮遇Element is not interactable问题

问题场景 #

测试pigu.lt网站修改个人信息时，尝试点击性别单选按钮（id为option1的<input>元素），出现Element is not interactable错误。

原Java+Selenium代码 #

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class TestSelenium {
    public static void main(String[] args){
        WebDriver driver=new ChromeDriver();
        driver.get("https://pigu.lt/ru/u/login");
        driver.manage().window().maximize();
        WebElement element=driver.findElement(By.name("email"));
        element.sendKeys("qwertyuiop600309@gmail.com");
        WebElement password=driver.findElement(By.name("password"));
        password.sendKeys("Qwerty");

        driver.findElement(By.name("login")).click();

        driver.findElement(By.xpath("//a[@href='u/info']")).click();
        driver.findElement(By.name("name")).sendKeys("Qwerty");
        driver.findElement(By.name("surname")).sendKeys("Qwerty");
        driver.findElement(By.xpath("//input[@id='option1']")).click();

    }
}

对应HTML结构 #

<div class="form-row">
<label>Пол</label>
<div class="pill-swicher">
<input type="radio" value="m" name="sex" id="option1">
<label for="option1">Мужчина</label>
<input type="radio" value="f" name="sex" id="option2">
<label for="option2">Женщина</label>
<input type="radio" value="n" name="sex" checked="" id="option3">
<label for="option3">Не хочу говорить</label>
</div>
</div>

解决方案 #

1. 点击绑定的<label>元素 #

页面中<label>通过for属性与<input>绑定，点击<label>会自动触发对应单选按钮的选择，且<label>通常是可见可交互的，能避免直接操作被遮挡的<input>。

修改后的点击代码：

driver.findElement(By.xpath("//label[@for='option1']")).click();

2. 添加显式等待确保元素可交互 #

页面跳转后可能存在渲染延迟，使用WebDriverWait等待元素可点击后再操作，避免因元素未加载完成导致的错误。

先导入相关类：

import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

修改后的代码片段：

// 进入个人信息页面后添加等待
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
// 等待男性选项的label可点击
WebElement maleOption = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//label[@for='option1']")));
maleOption.click();

3. 使用JavaScript强制点击（备选方案） #

如果前两种方法无效，可通过JavaScript直接触发元素的点击事件，绕过Selenium的交互检查。

先导入JavascriptExecutor类：

import org.openqa.selenium.JavascriptExecutor;

修改后的代码片段：

WebElement maleRadio = driver.findElement(By.id("option1"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", maleRadio);

完整修改后的代码示例 #

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;

public class TestSelenium {
    public static void main(String[] args){
        WebDriver driver=new ChromeDriver();
        driver.get("https://pigu.lt/ru/u/login");
        driver.manage().window().maximize();
        
        // 登录操作
        WebElement element=driver.findElement(By.name("email"));
        element.sendKeys("qwertyuiop600309@gmail.com");
        WebElement password=driver.findElement(By.name("password"));
        password.sendKeys("Qwerty");
        driver.findElement(By.name("login")).click();

        // 进入个人信息页面
        driver.findElement(By.xpath("//a[@href='u/info']")).click();
        
        // 修改姓名
        driver.findElement(By.name("name")).sendKeys("Qwerty");
        driver.findElement(By.name("surname")).sendKeys("Qwerty");
        
        // 等待性别选项可点击并选择男性
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        WebElement maleOption = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//label[@for='option1']")));
        maleOption.click();
    }
}

内容的提问来源于stack exchange，提问作者Qwerty Uiop