如何通过 Selenium 根据 html 点击按钮？答案

【问题标题】：How to click on the button as per the html through Selenium?如何通过 Selenium 根据 html 点击按钮？
【发布时间】：2019-01-31 21:10:09
【问题描述】：

我正在尝试使用 selenium 查找并单击此按钮：

<button class="orangeButton nextStep js-submitForm js-pop" data-href="/user/welcome/subscribe">Take me to my Subscriptions</button>

但是，没有 id 并且类名太长，所以我想使用 xpath。但是，我不明白如何使用它..

当前代码：

driver.FindElement(By.XPath("//button[@class='orangeButton nextStep js-submitForm js-pop\'")).Click();

但这因为不是有效的 xpath 参数而失败

【问题讨论】：

尝试删除多余的反斜杠并用方括号关闭谓词："//button[@class='orangeButton nextStep js-submitForm js-pop']"

标签： c# selenium xpath css-selectors webdriver

【解决方案1】：

没有。您可以通过 xpath 尝试的方法，只需尝试以下 xpath 表达式：

"//button[@class='orangeButton nextStep js-submitForm js-pop']"
"//*[@class='orangeButton nextStep js-submitForm js-pop']"
"//*[contains(@class,'orangeButton nextStep js-submitForm js-pop')]"
"//*[contains(@class,'orangeButton')]" // contains() can accept partial text as well

也检查下面（如果有效与否）

"//*[contains(@data-href,'/user/welcome/subscribe')]"
"//*[contains(@data-href,'subscribe')]"

通过使用 AND 和或 OR

"//*[@class='orangeButton nextStep js-submitForm js-pop' and @data-href='/user/welcome/subscribe']"
"//*[@class='orangeButton nextStep js-submitForm js-pop' OR @data-href='/user/welcome/subscribe']"

【讨论】：

【解决方案2】：

根据您共享的 HTML，所需元素是启用了 JavaScript 的元素，因此您必须诱导 WebDriverWait 使该元素可点击，您可以使用以下任一解决方案：

xpath:

new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[@class='orangeButton nextStep js-submitForm js-pop' and contains(@data-href,'subscribe')][contains(.,'Take me to my Subscriptions')]"))).Click();

cssSelector:

new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("button.orangeButton.nextStep.js-submitForm.js-pop[data-href$='subscribe']"))).Click();

【讨论】：

【解决方案3】：

不需要使用所有类来定位元素，只需要那些使元素唯一的类。

通过css：

driver.FindElement(By.CssSelector("button.nextStep"));
driver.FindElement(By.CssSelector("button.orangeButton.nextStep"));
driver.FindElement(By.CssSelector("button.orangeButton.nextStep.js-submitForm.js-pop"));

通过 xpath 和类：

driver.FindElement(By.XPath("//button[contains(@class,'orangeButton) and contains(@class,'nextStep)'"));

通过 xpath 和文本：

driver.FindElement(By.Xpath("//button[normalize-space(., 'Take me to my Subscriptions')"));

【讨论】：

【解决方案4】：

试试这个。您不能将由空格分隔的类视为一个类字符串。空格意味着它是一个不同的类，你必须单独对待每个类。

driver.FindElement(By.Xpath("//button[contains(@class, 'orangeButton') and contains(@class, 'nextStep') and contains(@class, 'js-submitForm') and contains(@class, 'js-pop')]"));

【讨论】：