Selenium：如何从通过 CssSelector 或 XPath 提供的 HTML 中查找元素

Question

这是页面上的一个按钮：<button data-purpose="add-section-btn" type="button"         class="ellipsis btn btn-default btn-block">   <span class="a3 udi udi-plus-square"></span>   <!-- react-text: 255 --> <!-- /react-text -->   <!-- react-text: 256 -->Add Section<!-- /react-text --></button>当我尝试使用以下代码找到它时：var btns = _driver.FindElements(By.TagName("button"));var sectionTitle = btns.Where(x => x.GetAttribute("data-purpose") == "add-section-btn");它返回空值。如果我尝试以下 XPath：var btn = _driver.FindElement(By.XPath("//button[data-purpose=\"add-section-btn\"]"));然后我得到一个例外。如何找到这样的按钮？

Answer 1

根据您共享的HTML以查找带有文本的元素作为添加部分，因为该元素是一个React 元素，您必须诱导WebDriverwait以使该元素可见，您可以使用以下任一定位器策略：

• CSS选择器：

  var btn = new WebDriverWait(_driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.CssSelector("button.ellipsis.btn.btn-default.btn-block[data-purpose='add-section-btn']")));

• 路径：

  var btn = new WebDriverWait(_driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.XPath("//button[@class='ellipsis btn btn-default btn-block' and @data-purpose='add-section-btn'][normalize-space()='Add Section']")));