javascript - xpath 就像点击按钮一样，但没有实际操作

Question

我目前正在为 Web 应用程序开发自动化测试套件。 Web 应用程序真的很挑剔。最近，我们有一个 UI 更新，所以我运行测试来测试我们的 GUI 和按钮，以及访问我们的 xpaths 是否仍在工作。

万圣节前夜，我的剧本变成了现实 太棒了~

在这些套件中，我有一组两个测试:yesLogout、noLogout。 yesLogout 在您尝试注销时单击"is"按钮。 noLogout 在您尝试注销时单击“否”按钮。

当您在测试脚本中运行 noLogout 时，脚本会单击“否”并且注销提示消失。

当您在测试脚本中运行 yesLogout 时，脚本单击"is"按钮，但没有任何反应。 "is"按钮会产生一个动画，就好像它被点击了一样，但提示只是保留在那里。

手动点击按钮效果很好。

我将分享这两种方法(noLogout、yesLogout)，因为它们实际上是相同的，它们只是调用两个不同的 xpath。为了这个问题，忘记我正在测试 - 现在测试不是问题。假装我是一个真正需要我的脚本来单击此按钮的怪人。

用于测试的两个函数(极度简化):

public class HiStackOverflow {

    public class yesLogout {
        public static void run(WebDriver driver) throws FileNotFoundException {
            Properties prop = new Properties();
            InputStream selectproductsidebar;

            selectproductsidebar = new FileInputStream(
                "C:/PATH/TO/PROPERTIES");
            try {
                prop.load(selectproductsidebar);
            } catch (IOException e) {
                e.printStackTrace();
            }


            WebElement yesLogout = driver.findElement(By.xpath(prop.getProperty("yeslogout")));
            Actions actions = new Actions(driver);
            actions.moveToElement(yesLogout).build().perform();
            yesLogout.click();
        }
    }

    public class noLogout {
        public static void run(WebDriver driver) throws FileNotFoundException {
            Properties prop = new Properties();
            InputStream selectproductsidebar;

            selectproductsidebar = new FileInputStream(
                "C:/PATH/TO/PROPERTIES");
            try {
                prop.load(selectproductsidebar);
            } catch (IOException e) {
                e.printStackTrace();
            }


            WebElement noLogout = driver.findElement(By.xpath(prop.getProperty("nologout")));
            Actions actions = new Actions(driver);
            actions.moveToElement(noLogout).build().perform();
            noLogout.click();
        }

    }
}

属性文件中是按钮和否按钮的xpath:

yeslogout = //div[contains(@title,'Enter')]
nologout = //div[contains(@title,'Esc')]

这是与该问题相关的 HTML:

<div style="transform: translate(0px, 60px) scale(1, 1) rotate(0deg);">
  <div style="transform: translate(10px, 0px) scale(1, 1) rotate(0deg);">
    <div>
      <div tabindex="6" role="button" aria-label="Yes" title="Keyboard shortcut: Enter">
        <div>
        </div>
        <div tabindex="7" role="button" aria-label="No" title="Keyboard shortcut: Esc" style="transform: translate(163.5px, 0px) scale(1, 1) rotate(0deg);">
          <div>
          </div>
        </div>
      </div>
    </div>

tabindex="6"是是按钮。 tabindex="7"是否按钮。两者之间存在细微差别(no 按钮具有某种转换:附有翻译魔法)，但就我而言，它不应该表现得如此奇怪。

再次，实际问题 - 运行 yesLogout 方法定位，悬停并单击是按钮，但没有任何反应。手动单击"is"按钮效果很好。

我可以再扩展一些<div>如果需要，s 在 html 中，但我真的不认为它会显示太多(只是一些更多的格式和 <canvas> 东西)。我真的对正在发生的事情的解释很感兴趣。提前致谢。

编辑:我曾尝试使用 JavascriptExecutor 来点击该元素，但遗憾的是，它没有用。这整个周末都在绞尽脑汁。

甚至做一些疯狂的事情，比如:

WebElement yesLogout = driver.findElement(By.xpath(prop.getProperty("yeslogout")));
        Actions actions = new Actions(driver);
        actions.moveToElement(yesLogout, 10, 10).build().perform();
        yesLogout.click();
        yesLogout.click();
        yesLogout.click();
        yesLogout.click();
        yesLogout.click();
        yesLogout.click();

显示按钮被一遍又一遍地点击，但没有实际功能。

为了完整起见并试图让人们理解这个问题，我将重申，手动单击按钮效果很好。 Enter 快捷方式也是如此。 Selenium .click()命令明显“有效”，但不执行按钮本身的功能。

第二次编辑:我将包含有关 div 的完全扩展的 HTML:

<div style="transform: translate(794px, 202px) scale(1, 1) rotate(0deg);" tabindex="5" role="dialog">
  <div>
    <div>
      <div>
        <div>
          <div>
            <canvas height="106" width="332" style="top: 0px; left: 0px; width: 332px; height: 106px;" />
          </div>
        </div>
        <div style="transform: translate(10px, 10px) scale(1, 1) rotate(0deg);">
          <div>
            <div style="transform: translate(6px, 6px) scale(1, 1) rotate(0deg);">
              <div style="font-family: franklin-gothic-urw; font-weight: 400; font-style: normal; font-size: 14px; opacity: 1; color: rgb(0, 0, 0);">Are you sure you want to logoff?</div>
            </div>
          </div>
        </div>
        <div style="transform: translate(0px, 60px) scale(1, 1) rotate(0deg);">
          <div style="transform: translate(10px, 0px) scale(1, 1) rotate(0deg);">
            <div>
              <div tabindex="6" role="button" aria-label="Yes" title="Keyboard shortcut: Enter">
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <canvas height="36" width="148" style="top: 0px; left: 0px; width: 148.5px; height: 36px;" />
                        </div>
                      </div>
                      <div style="transform: translate(56px, 7px) scale(1, 1) rotate(0deg);">
                        <div style="font-family: proxima-nova; font-weight: 400; font-style: normal; font-size: 17px; opacity: 1; color: rgb(255, 255, 255); transform: translate(5px, 0px) scale(1, 1) rotate(0deg);">Yes</div>
                      </div>
                      <div style="">
                        <div>
                          <div>
                            <canvas height="36" width="148" style="top: 0px; left: 0px; width: 148.5px; height: 36px;" />
                          </div>
                        </div>
                        <div style="display: none;">
                          <div>
                            <canvas height="36" width="148" style="top: 0px; left: 0px; width: 148.5px; height: 36px;" />
                          </div>
                          <div style="transform: translate(56px, 7px) scale(1, 1) rotate(0deg);">
                            <div style="font-family: proxima-nova; font-weight: 400; font-style: normal; font-size: 17px; opacity: 1; color: rgb(255, 255, 255); transform: translate(5px, 0px) scale(1, 1) rotate(0deg);">Yes</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div tabindex="7" role="button" aria-label="No" title="Keyboard shortcut: Esc" style="transform: translate(163.5px, 0px) scale(1, 1) rotate(0deg);">
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <canvas height="36" width="148" style="top: 0px; left: 0px; width: 148.5px; height: 36px;" />
                        </div>
                      </div>
                      <div style="transform: translate(58px, 7px) scale(1, 1) rotate(0deg);">
                        <div style="font-family: proxima-nova; font-weight: 400; font-style: normal; font-size: 17px; opacity: 1; color: rgb(255, 255, 255); transform: translate(5px, 0px) scale(1, 1) rotate(0deg);">No</div>
                      </div>
                      <div style="display: none;">
                        <div>
                          <div>
                            <canvas height="36" width="148" style="top: 0px; left: 0px; width: 148.5px; height: 36px;" />
                          </div>
                        </div>
                        <div style="display: none;">
                          <div>
                            <canvas height="36" width="148" style="top: 0px; left: 0px; width: 148.5px; height: 36px;" />
                          </div>
                          <div style="transform: translate(58px, 7px) scale(1, 1) rotate(0deg);">
                            <div style="font-family: proxima-nova; font-weight: 400; font-style: normal; font-size: 17px; opacity: 1; color: rgb(255, 255, 255); transform: translate(5px, 0px) scale(1, 1) rotate(0deg);">No</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

首先尝试使用不同的选项进行调试，例如传递键盘 Enter 键以查看它是否有效

WebElement.sendKeys(Keys.ENTER);

您可以尝试的其他选项是使用 CSS 查找元素或使用 Java 脚本方法单击元素

WebElement element = driver.findElement(By.id("gbqfd"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);

引用:How to click an element in Selenium WebDriver using JavaScript