Question

我有一个产生以下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>

代码工作正常，当您使用浏览器手动鼠标悬停时，正确显示弹出窗口内容。

我尝试使用以下量角器测试来测试鼠标悬停功能：

 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());
 });

测试似乎正在运行，浏览器打开但我在浏览器关闭之前没有看到弹出内容显示，所以我很确定鼠标移动因为某些原因而无法正常工作。然后在终端输出以下内容：

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$

我已阅读文档，使用浏览器绝对是接近此测试的正确方法。我不知道，因为语法对我来说是正确的。

Answer 1

一个可能的问题是你需要让等待加载角度：

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();
 });

^{我还删除了find()电话（不确定你是否真的需要它）并修改了最后一行的括号结束顺序。}

Answer 2

在致电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();
 });

Answer 3

我偶然发现了Chrome上鼠标悬停问题的解决方法。如果我们将mouseMove（）方法链接两次，它将起作用。

不适用于chrome的代码：

browser.actions.mouseMove(element).click().perform();

具有解决方法的代码（有效）：

browser.actions.mouseMove(element).mouseMove(element).click().perform();

Answer 4

对于没有棱角的站点，请尝试以下代码。该代码已通过测试并通过量角器-版本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();   
    });

})

Answer 5

使用此方法将定位器传递给可以正常工作的方法

mouseHover: function (locator) {
        return browser.actions().mouseMove(locator).perform();
    },

mouseover元素无法使用量角器

5 个答案: