鼠标悬停元素无法使用量角器工作

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

测试似乎运行，浏览器打开但我没有看到弹出内容在浏览器关闭之前显示，所以我相当确定 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$

我已经阅读了文档，使用 浏览器 绝对是进行此测试的正确方法。我不知所措，因为语法对我来说是正确的。

Answer 1

一个可能的问题是你需要让它等待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();
 });

^{我还删除了 find() 调用（不确定您是否真的需要它）并修复了最后一行的括号闭合顺序。}

Answer 2

在调用 browser.actions().mouseMove("mouseoverelement").perform(); 之前使用 browser.waitForAngular()... 因为您需要等到 angular 加载。

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

对于none angular 站点，请尝试下面的代码 code.The 已经测试通过在量角器 --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();   
    });

})

Answer 5

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

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

鼠标悬停元素无法使用量角器工作

mouseover element not working using protractor

javascript

testing

end-to-end

angularjs

protractor