WebDriver点击()vs JavaScript点击()

故事:

在StackOverflow上,我看到用户报告他们无法通过selenium WebDriver"click"命令单击一个元素,并且可以通过执行脚本单击JavaScript来解决它.

Python中的示例:

element = driver.find_element_by_id("myid")
driver.execute_script("arguments[0].click();", element)

WebDriverJS/Protractor中的示例:

var elm = $("#myid");
browser.executeScript("arguments[0].click();", elm.getWebElement());

问题:

为什么在常规WebDriver点击时没有点击"通过JavaScript"？究竟是什么时候发生这种变通方法的缺点(如果有的话)？

^{我个人使用这种解决方法而没有完全理解为什么我必须这样做以及它可能导致什么问题.}

与目前接受的答案所暗示的相反,当涉及到WebDriver执行单击并在JavaScript中执行此操作之间的区别时,PhantomJS没有任何特定内容.

区别

这两种方法之间的本质区别在于所有浏览器都很常见,可以简单地解释一下:

WebDriver:当WebDriver执行单击时,它会尽可能地模拟真实用户使用浏览器时发生的情况.假设你有一个元素A,它是一个按钮,上面写着"点击我",一个元素B是一个div透明的元素,但是它的尺寸和zIndex设置使它完全覆盖A.然后你告诉WebDriver点击A. WebDriver将模拟点击,以便B 首先接收点击.为什么？因为B覆盖A,并且如果用户试图点击A,那么B将首先获得该事件.A是否最终会获得click事件取决于B如何处理事件.无论如何,在这种情况下,WebDriver的行为与真实用户尝试单击A时的行为相同.

JavaScript:现在,假设你使用JavaScript来做A.click().这种单击方法不会重现用户尝试单击A时实际发生的情况 .JavaScript将click事件直接发送给A,B不会获取任何事件.

当WebDriver点击没有时,为什么JavaScript单击工作？

正如我上面提到的,WebDriver将尽力模拟真实用户使用浏览器时会发生什么.事实上,DOM可以包含用户无法与之交互的元素,而WebDriver将不允许您单击这些元素.除了我提到的重叠案例,这也需要不能点击隐形元素.我在Stack Overflow问题中看到的一个常见情况是尝试与已经存在于DOM中的GUI元素进行交互,但只有在操作了某些其他元素时才会显示.这有时会发生在下拉菜单中:您必须首先单击按钮,然后在选择菜单项之前调出下拉列表.如果有人在菜单可见之前尝试单击菜单项,WebDriver将拒绝并说该元素无法操作.如果该人然后尝试使用JavaScript,它将起作用,因为事件直接传递给元素,而不管可见性如何.

您何时应该使用JavaScript进行点击？

如果您使用Selenium 测试应用程序,我对这个问题的回答"几乎从不".总的来说,您的Selenium测试应该重现用户对浏览器的操作.以下拉菜单为例:测试应该首先点击下拉按钮,然后单击菜单项.如果GUI出现问题,因为按钮不可见,或者按钮无法显示菜单项或类似内容,那么您的测试将失败并且您将检测到该错误.如果您使用JavaScript进行单击,则无法通过自动化测试检测到这些错误.

我说"几乎从不",因为可能存在使用JavaScript有意义的例外情况.但它们应该非常罕见.

如果您使用Selenium来抓取网站,那么尝试重现用户行为并不重要.因此,使用JavaScript绕过GUI不是一个问题.

当JavaScript HTMLElement.click()执行click事件的默认操作时,驱动程序执行的单击尝试尽可能接近地模拟真实用户的行为,即使该元素不可交互.

不同之处是:

驱动程序通过将元素滚动到视图中来确保元素是可见的,并检查元素是否可交互.

驱动程序将引发错误:

当点击坐标顶部的元素不是目标元素或后代时

当元素没有正大小或者它是完全透明的时候

当元素是禁用的输入或按​​钮时(属性/属性disabled是true)

当元素禁用鼠标指针时(CSS pointer-events为none)

JavaScript HTMLElement.click()将始终执行默认操作,或者如果元素被禁用,则最多会无声地失败.

如果可以集中精力,那么驱动程序应该将元素置于焦点上.

JavaScript HTMLElement.click()不会.

期望驱动程序像真实用户一样发出所有事件(mousemove,mousedown,mouseup,click,...).

JavaScript HTMLElement.click()只发出click事件.页面可能依赖于这些额外事件,如果不发出这些事件可能会有不同的行为.

这些是驱动程序针对Chrome点击发出的事件:

mouseover {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
mousemove {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
mousedown {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
mouseup {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
click {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }

这是使用JavaScript注入发出的事件:

click {target:#topic, clientX:0, clientY:0, isTrusted:false, ... }

JavaScript发出的事件.click() 不受信任,可能不会调用默认操作:

https://developer.mozilla.org/en/docs/Web/API/Event/isTrusted
https://googlechrome.github.io/samples/event-istrusted/index.html

请注意,某些驱动程序仍在生成不受信任的事件.PhantomJS从2.1版开始就是这种情况.

JavaScript发出的事件.click() 没有点击的坐标.

属性clientX, clientY, screenX, screenY, layerX, layerY设置为0.页面可能依赖于它们,并且可能表现不同.

使用JavaScript .click()来废弃某些数据可能没问题,但它不在测试环境中.它违背了测试的目的,因为它不模拟用户的行为.因此,如果来自驱动程序的单击失败,那么真实用户很可能也无法在相同条件下执行相同的单击.

什么使得驱动程序在我们期望它成功时无法单击元素？

由于延迟或过渡效应,目标元素尚未可见/可交互.

一些例子 :

https://developer.mozilla.org/fr/docs/Web(下拉导航菜单) http://materializecss.com/side-nav.html(下拉侧栏)

Workarrounds:

添加服务员等待可见性,最小尺寸或稳定位置:

// wait visible
browser.wait(ExpectedConditions.visibilityOf(elem), 5000);

// wait visible and not disabled
browser.wait(ExpectedConditions.elementToBeClickable(elem), 5000);

// wait for minimum width
browser.wait(function minimumWidth() {
    return elem.getSize().then(size => size.width > 50);
}, 5000);

重试单击直到成功为止:

browser.wait(function clickSuccessful() {
    return elem.click().then(() => true, (ex) => false);
}, 5000);

添加与动画/过渡持续时间匹配的延迟:

browser.sleep(250);

一旦滚动到视图中,目标元素最终会被浮动元素覆盖:

驱动程序会自动将元素滚动到视图中以使其可见.如果页面包含浮动/粘性元素(菜单,广告,页脚,通知,Cookie政策......),则该元素可能会被最终覆盖,并且将不再可见/可交互.

示例:https://twitter.com/？lang = en

解决方法:

将窗口的大小设置为较大的值以避免滚动或浮动元素.

移动带负Y偏移的元素,然后单击它:

  browser.actions()
     .mouseMove(elem, {x: 0, y: -250})
     .click()
     .perform();

在单击之前将元素滚动到窗口的中心:

browser.executeScript(function scrollCenter(elem) {
  var win = elem.ownerDocument.defaultView || window,
    box = elem.getBoundingClientRect(),
    dy = box.top - (win.innerHeight - box.height) / 2;
  win.scrollTo(win.pageXOffset, win.pageYOffset + dy);
}, element);

element.click();

如果无法避免,请隐藏浮动元素:

browser.executeScript(function scrollCenter(elem) {
  elem.style.display = 'none';
}, element);

3> Linh Pham..：

---

注意:我们称之为"点击"是最终用户点击.'js click'是通过JS点击

为什么在常规WebDriver点击时没有点击"通过JavaScript"？

有两种情况发生:

I. 如果您正在使用PhamtomJS

然后这是最常见的已知行为PhantomJS.例如,某些元素有时不可点击

.这是因为它PhantomJS是用于模拟浏览器引擎的原始版本(如初始HTML + CSS - >计算CSS - >渲染).但这并不意味着以最终用户的方式(查看,点击,拖动)进行交互.因此PhamtomJS,只是部分支持最终用户的交互.

为什么JS点击工作？至于任何一次点击,它们都是平均点击.它就像一支有1个枪管和2个触发器的枪.一个来自视口,一个来自JS.由于PhamtomJS很好地模拟了浏览器的引擎,JS点击应该可以完美地运行.

II."click"的事件处理程序在坏的时间段内绑定了.

例如,我们得到了一个

- >我们做一些计算

- >然后我们将点击事件绑定到

.

- >加上一些错误的角度编码(例如,没有处理范围的循环)

我们可能会得到相同的结果.单击将不起作用,因为WebdriverJS在没有单击事件处理程序时尝试单击该元素.

为什么JS点击工作？Js click就像将js直接注入浏览器一样.可能有两种方式,

拳头是通过devtools控制台(是的,WebdriverJS与devtools的控制台通信).

第二是将

mobiledu2402852413

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

• actionscrip
• bash
• c#
• c++
• c语言
• erlang
• flutter
• go
• golang
• java
• javascript
• lua
• node.js
• perl
• php
• python
• scala
• typescript

RankList | 热门文章

• 1如何告诉Gradle始终使用--console = plain？
• 2在C++ 11中使用shared_from_this()而不使用托管共享指针
• 3在git rebase期间找到分支名称
• 4从C++ std :: vector中的线程中启动可运行对象
• 5Android Studio更新破坏了我的模拟器
• 6Scikit Learn Multilabel分类:ValueError:您似乎正在使用传统的多标签数据表示
• 7无法在AsyncTask中访问"findViewById"
• 8Haskell从文件中读取一个Map
• 9Webpack手表没有在Windows上使用Webstorm？
• 10Kafka Producer 0.9性能问题与小消息
• 11如何在Google Maps Api V2 Android上组合,合并或加入圈子
• 12从每个案例的创建时间开始计算开放案例的更有效方法
• 13moment.js:如何获得短日期格式？
• 14WKWebView scrollview委托
• 15Magento中的CSV导入/导出问题
• 16如何在R图轴标签中使用斜体
• 17如何在HTML中链接JavaScript程序并使其运行？
• 18AWS API-Gateway与SNS通信
• 19在Intellij IDEA,PhpStorm或WebStorm中导入设置
• 20是否可以通过datastax驱动程序向Cssandra集群提交CQL脚本？

DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有