Javascript 鼠标悬停元素无法使用量角器工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28297941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mouseover element not working using protractor
提问by Mike Rifgin
I have a directive that produces the following html structure:
我有一个生成以下 html 结构的指令：
<div class="popover ng-isolate-scope" ng-mouseover="toggle(true)" ng-mouseleave="toggle(false)" popover="" label="hover time!" trigger-class="button" content-class="specialContentClass">
<span id="thing" class="popover-trigger button">hover time!</span>
<div ng-transclude="" ng-show="show" class="popover-content ng-hide">
<div class="ng-scope">Popover content </div>
</div>
</div>
The code works fine and the popover content is correctly shown when you mouseover manually using a browser.
当您使用浏览器手动悬停鼠标时，代码工作正常，并且弹出内容会正确显示。
I'm trying to test the mouseover functionality with the following protractor test:
我正在尝试使用以下量角器测试来测试鼠标悬停功能：
it('should display the popover-content on mouseover', function() {
browser.get('http://localhost:9000/');
browser.actions()
.mouseMove(element(by.css('.popover')).find()).perform();
expect(element(by.css('.popover-content'))
.isDisplayed().toBeTruthy());
});
The test seems to run, the browser opens but I don't see the popup-content displaying before the browser then closes so I'm fairly sure the mousemove bit isn't working for some reason. The following is then output in the terminal:
测试似乎运行了，浏览器打开了，但在浏览器关闭之前我没有看到弹出内容显示，所以我很确定由于某种原因，mousemove 位不起作用。然后在终端中输出以下内容：
launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
ycompu:angular ycompu$
I've read the documentation and using browseris definitely the right way to approach this test. I'm at a loss as the syntax looks correct to me.
我已阅读文档并且使用浏览器绝对是进行此测试的正确方法。我不知所措，因为语法对我来说是正确的。
回答by alecxe
One possible problem is that you need to make it wait for angular to load:
一个可能的问题是您需要让它等待 angular 加载：
it('should display the popover-content on mouseover', function() {
browser.get('http://localhost:9000/');
browser.waitForAngular();
browser.actions().mouseMove(element(by.css('.popover'))).perform();
expect(element(by.css('.popover-content')).isDisplayed()).toBeTruthy();
});
I've also removed the find()call (not sure if you really need it here) and fixed the parenthesis closing order in the last line.
我还删除了find()调用（不确定您是否真的需要它）并修复了最后一行中的括号结束顺序。
回答by AMOD THAKUR
I sort of discovered a workaround to the mouse hover issue on chrome by accident. If we chain the mouseMove() method twice , it works.
我偶然发现了 chrome 上鼠标悬停问题的解决方法。如果我们将 mouseMove() 方法链接两次，它就会起作用。
Code that doesn't work on chrome:
不适用于 chrome 的代码：
browser.actions.mouseMove(element).click().perform();
browser.actions.mouseMove(element).click().perform();
Code with workaround(which works):
带有解决方法的代码（有效）：
browser.actions.mouseMove(element).mouseMove(element).click().perform();
回答by Sameera De Silva
For none angular sites , please try the below code.The code has been tested and passed in protractor --version 5.4.2 with Chrome 79 the latest as per today .
对于没有角度的网站，请尝试以下代码。该代码已经过测试并通过量角器 --version 5.4.2 和今天最新的 Chrome 79。
describe('My first test class', function() {
it('My function', function() {
browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false
browser.waitForAngularEnabled(false);
browser.driver.get('http://demoqa.com/menu/');
//var menuElectronics= element(by.id('ui-id-4'));//We can define an element and move to it
//browser.actions().mouseMove(menuElectronics).perform();
//Directly find the element using id
browser.actions().mouseMove(element(by.id('ui-id-4'))).perform();
//Click on the element that appeared after hover over the electronics
element(by.id('ui-id-7')).click();
});
})
回答by bhargava krishna
use this method pass the locater to the method this is working fine
使用此方法将定位器传递给工作正常的方法
mouseHover: function (locator) {
return browser.actions().mouseMove(locator).perform();
},
回答by Ajitabh Ranjan
Use browser.waitForAngular()before calling browser.actions().mouseMove("mouseoverelement").perform();... because you need to wait till angular load.
browser.waitForAngular()在调用之前使用browser.actions().mouseMove("mouseoverelement").perform();... 因为您需要等到角负载。
it('mouseover test', function() {
....
....
browser.waitForAngular();
browser.actions().mouseMove(element(by.css('#mouseoverelement'))).perform();
expect(element(by.css('#mouseoverelement')).isDisplayed()).toBeTruthy();
});
