web-dev-qa-db-ja.com

分度器+ chrome driver：要素はポイントでクリックできません

こんにちは、基本的な分度器テストを動作させるのに苦労しています。

私の設定：

  • Requirejsを使用しているため、ng-app attrではなく、angular.bootstrap（）を使用してangularを初期化します。分度器のドキュメントによると、これはそのままではサポートされていませんが、クリックを必要としないテストではうまく機能するようです。

  • 分度器conf.json：

    "use strict";
exports.config = {
    specs: '../E2ETests/**/*.js',
    chromeOnly: true,
    getPageTimeout: 30000,
    allScriptsTimeout: 30000
}
  • 私はディレクティブでラップするいくつかのサードパーティのjqueryプラグを使用していますが、これらは問題の一部であると思われます。

テスト：

"use strict";
describe('When clicking should add stuff', function () {
    var ptor;
    beforeEach(function () {
        browser.get('https://localhost/myApp');
        ptor = protractor.getInstance();
    });
    it('add stuff', function () {
        // If I comment this, the test pass. 
        element(by.id('add-stuff-button')).click();
        // This does not matter fails on the line above..
        expect(browser.getTitle()).toBeDefined();
    });
});

エラー：

UnknownError: unknown error: Element is not clickable at point (720, 881). Other element would         receive the click: <div class="col-md-5 col-md-offset-5">...</div>
(Session info: chrome=37.0.2062.124)
(Driver info: chromedriver=2.10.267521,platform=Windows NT 6.1 SP1 x86_64)

思考

Idを変更すると要素が見つからないと文句を言うので、chromedriverはボタンを見つけます。だから、問題はボタンが最初の位置から移動することだと思います。 element（***）関数はangularの実行を待つ必要があるため、angular apiのデータのフェッチなどを使用しない可能性があるため、干渉する可能性のあるサードパーティのプラグインが疑われる。angularは完了したと思いますが、サードパーティのプラグがデータを取り込み、移動します。

何をすべきか考えていますか？サードパーティのプラグに問題がある場合、サードパーティのものが進行中であることを何らかの方法でangularに伝えることができ、その後、それが完了したらそれを伝えることができますか？

Thx Br Twd

angularjsprotractorselenium-chromedriver
31
twDuke

設定ファイルでウィンドウサイズを設定する必要があります

onPrepare: function() {
  browser.manage().window().setSize(1600, 1000);
}
30
Gal Margalit

以下は私のためにうまくいきました：

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

編集：上記がうまくいかない場合は、perform（）メソッドもチェーンしてみてください（編集の提案としてこれを得ました、私はそれをテストしていませんが、誰かがそれを検証してコメントすることができます）

browser.actions().mouseMove(element).click().perform();
19
Aman Gupta

これは、chromeウィンドウが小さすぎる場合に発生します。beforeEach内に追加してみてください

browser.driver.manage().window().setSize(1280, 1024);
12
originof

または、単にActionsクラスを使用します。

browser.actions().mouseMove(elem).click().perform();
11
Raul Huluban

多分それはあなたの場合には当てはまりませんが、同じ問題に遭遇し、 Milena の答えに基づいて、ボタンを隠している別の要素を探しています（私の場合は、ドロップダウンメニュー画面の右上にあります）。

Connected to Browser Syncbrowsersyncによって送信され、Gulpによって起動された通知メッセージのようです。メッセージは短時間で消えましたが、onClick（）を呼び出した後です。

通知を削除するために、gulpfileにbrowsersyncを初期化するときにnotify：falseパラメーターを追加しました。

browserSync.init(files, {
    server: {
        baseDir: "dist",
        index: "index.html"
    },
    notify: false
});
4
Emmanuel P.

同じ問題がありましたが、ウィンドウサイズには関係ありませんでしたが、ngAnimationが終了するまで待たなければなりませんでした。

そのため、要素がクリック可能になるまで待つ必要がありました。

    const msg = 'Waiting for animation timeout after 1s';
    const EC  = new protractor.ProtractorExpectedConditions();
    await browser.wait(EC.elementToBeClickable(model.elements.button.checkCompliance), 1000, `${msg} panel`);
    await model.elements.button.checkCompliance.click();

@note-async/await node 8機能を使用しています。これを通常のPromiseに変換することもできます。 ProtractorExpectedConditionsの代わりにExpectedConditionsも使用します ドキュメントを参照

4
fredtma

ブラウザのスリープ時間を使用してこの問題を修正します。

browser.driver.sleep(3000)

クリックボタンを与える前

3
Anik Saha

同じエラーが発生し、画面サイズを純粋に調整しても修正されませんでした。

さらに調べると、別の要素がボタンを覆い隠しているかのように見えたため、ボタンがクリックされなかった（できなかった）ため、Seleniumテストは失敗しました。おそらくそれが画面サイズを調整することでそれを修正する理由ですか？

私が修正したのは、他の要素を削除することでした（そして後でその位置を調整しました）。

2
Milena

これは、複数のディスプレイで実行する必要があるかどうかをテストする場合に、ウィンドウサイズを指定するよりも効果的です。

browser.manage().window().maximize();

1
Karanvir Kang

他の方法では、これを試すことができます：

this.setScrollPage = function (element) {

    function execScroll() {
        return browser.executeScript('arguments[0].scrollIntoView()',
            element.getWebElement())
    }

    browser.wait(execScroll, 5000);
    element.click();
};
1
Tayguara Dias Reis

Gal Malgarit の回答から、

設定ファイルでウィンドウサイズを設定する必要があります

onPrepare: function() {
  browser.manage().window().setSize(1600, 800);
}

それでも機能しない場合は、要素の場所までスクロールする必要があります

browser.executeScript('window.scrollTo(720, 881);');
element(by.id('add-stuff-button')).click();
0
patronaviera

また、使用している可能性のあるデバッグツールをオフにすることもできます。 Laravelとdebugbarを使用していたため、APP_DEBUGをfalseに設定する必要がありました。

0
xtrahelp.com

これは、要素を覆うトップナビゲーションバーまたはボトムナビゲーションバー/ Cookie警告バーが原因で発生する場合があることに注意してください。 angular 2の場合、クリックすると要素がページ上にだけ表示されるまでスクロールします。同様に、上にスクロールすると、トップナビゲーションで覆われます。

今のところ、スクロールアップを回避するために、私は以下を使用しています：

browser.refresh();
browser.driver.sleep(3000);

テストを開始する前に下部のバーをクリックして閉じることで、下部のバーを削除したことを確認しました。

0
trees_are_great

分度器設定ファイルを使用して、目的の画面解像度を定義できます（例：protractor.conf.jsまたはconfig.js）一貫したテスト動作のため。

たとえば、Chrome browser：

exports.config = {
  specs: [
    // ...
  ],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: [
        '--window-size=1600,900',
        '--headless'
      ]
    }
  }
  // ...
}

説明

  • window-size引数はChrome 1600 x 900ウィンドウで起動します。
  • headlessは、ヘッドレスChromeを起動し、画面解像度がそれより低い場合でも、指定されたウィンドウサイズ（1600 x 900）でテストを実行できるようにします。

2つの構成が必要な場合があります。1つは常に高解像度画面を持つ開発者向け（ヘッドレスモードなし）、もう1つは画面解像度がミステリーでアプリケーション/テストよりも低い場合があるビルドサーバー向け（ヘッドレスモード）です。のために設計されています。分度器構成ファイルはJavaScriptであり、コードの重複を避けるために拡張できます。

0
Jerome