15

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

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

4

5 回答 5

33

一个可能的问题是您需要让它等待 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()调用(不确定您是否真的需要它)并在最后一行修复了括号关闭顺序。

于 2015-02-03T14:35:21.423 回答
2

我偶然发现了一种解决chrome上鼠标悬停问题的方法。如果我们将 mouseMove() 方法链接两次,它就可以工作。

无法在 chrome 上运行的代码:

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

带有解决方法的代码(有效):

browser.actions.mouseMove(element).mouseMove(element).click().perform();
于 2018-11-16T19:46:25.697 回答
1

对于非 Angular 站点,请尝试以下代码。该代码已在 protractor --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();   
    });

})
于 2019-12-18T04:56:32.617 回答
0

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();
 });
于 2018-06-05T07:03:13.120 回答
0

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


mouseHover: function (locator) {
        return browser.actions().mouseMove(locator).perform();
    },
于 2020-02-16T14:18:03.123 回答