web-dev-qa-db-ja.com

分度器を使用してマウスオーバー要素が機能しない

次の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$

私はドキュメントを読み、browserを使用することは、このテストに取り組む正しい方法です。構文が正しいように見えるので、私は途方に暮れています。

javascriptangularjstestingprotractorend-to-end
14
Mike Rifgin

考えられる問題の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()呼び出しを削除し（ここで本当に必要かどうかはわかりません）、最後の行の括弧の閉じ順序を修正しました。

28
alecxe

なしangularサイト、以下のコードを試してください。コードはテストされ、分度器--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();   
    });

})
1
Sameera De Silva

chromeでのマウスホバーの問題の回避策を偶然発見しました。mouseMove（）メソッドを2回チェーンすると、動作します。

chromeで機能しないコード：

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

回避策付きのコード（機能します）：

browser.actions.mouseMove(element).mouseMove(element).click().perform();
1
AMOD THAKUR

このメソッドを使用して、これが正常に機能しているメソッドにロケーターを渡します

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

angularロードされるまで待機する必要があるため、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();
 });
0
Ajitabh Ranjan