如何在selenium中点击列表框中的元素？

Question

当我想测试Luma网站添加的项目时 https://magento.softwaretestingboard.com/olivia-1-4-zip-light-jacket.html，我无法自动在单独的列表框中选择尺寸和颜色并在此处检查元素

 <div class="swatch-option text" id="option-label-size-143-item-167" index="1" aria-checked="false" aria-describedby="option-label-size-143" tabindex="0" option-type="0" option-id="167" option-label="S" aria-label="S" option-tooltip-thumb="" option-tooltip-value="S" role="option" thumb-width="110" thumb-height="90">S</div>

我在购物车页面中找到元素并编写测试用例 放入购物车测试

 @FindBy(id = "option-label-size-143-item-167")    WebElement sizeProduct;   public void SizePdoduct() {    element.click();
    }
 @Test
    public void Test01_ValidSearch() throws InterruptedException {
        SeachProduct SearchObj=new SeachProduct(driver);
        SearchObj.setSearchBar(" Olivia 1/4 Zip Light Jacket");
        SearchObj.setSearchBtn();
        SearchObj.SelectProductName();
        SearchObj.SetSize();
        SearchObj.SetColor();
        SearchObj.setQuantity();
        SearchObj.AddToCart();
        String CartProductMsg = SearchObj.confirmProduct();
        assertTrue(CartProductMsg.contains("You added Juno Jacket to your shopping cart."), "Product is added successfully");
        Thread.sleep(2000);
    }

出现了这个异常。如何解决这个异常以及为什么会导致这个异常？可能是因为没有等待。

org.openqa.selenium.NoSuchElementException：没有这样的元素：无法定位元素：{“method”：“css选择器”，“selector”：“#option-label-size-143-item-167”}

https://magento.softwaretestingboard.com/

Answer 1

虽然您没有提供 SetSize() 方法的实现（旁注：方法应该采用驼峰式情况），但我可能会假设您在内部进行了简单的单击。

您的定位器看起来是正确的，但我建议不要将“id”与其中的数字一起使用。这些数字可能是动态的。
因此，当您说异常可能是由于缺少等待而引起时，您可能是对的。

查看提供的网站，进入产品页面时，在尺寸和颜色部分加载之前存在一些延迟。

在与元素交互之前尝试使用 WebDriverWait：

public SeachProduct setSize() {
    // consider having one instance of the WebDriverWait
    WebDriverWait wait = new WebDriverWait(this.driver, Duration.ofSeconds(10));
    wait.until(ExpectedConditions.elementToBeClickable(this.sizeProduct)).click();
    return this;
}