web-dev-qa-db-ja.com

要素が表示されないエラー（要素をクリックできない）

Webページに表示されるラジオボタンをクリックしたい。コードは次のとおりです。

HTMLコード：

<div class="small-checkbox red-theme raleway-regular text-muted2 position-relative">

        <div class="city-checkbox inline-block position-relative" ng-class="{'rounded-checkbox': main.current_city_id == 1, 'mb-20': main.ifDeviceIsPhone}">
            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect mh-20" for="mumbaiCity" ng-class="{'is-checked' : main.current_city_id == 1}">
                <input type="radio" id="mumbaiCity" class="mdl-radio__button position-relative vertical-middle" name="city" value="1" ng-click="main.setCity('Mumbai', 1)">
                <span class="mdl-radio__label position-relative font15"><img class="city-icon" src="../../../assets/img/cities/mumbai-icon.png">Mumbai</span>
            </label>
        </div>
</div>

テスケース：

// demo-test.js
describe('Protractor Demo App', function() {
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000000;

    it('check item count', function() {
        browser.get('<link>');
        element(by.id('mumbaiCity')).click();
    });

});

このテストはエラーを通過します：

1）分度器デモアプリのチェック項目数

メッセージ：

失敗：要素は表示されません

私も試しました：

element(by.css('[ng-click="main.setCity('Mumbai', 1)"]')).click();

エラーが発生します：

[16:16:26] E/launcher-エラー：SyntaxError：missing）引数リストの後

ラジオボタンがどのようにクリックされるかを提案してください。

javascriptangularjsseleniumselenium-webdriverprotractor
38
Rohini Choudhary

これは、Seleniumを使用したテスト自動化ではかなり一般的な問題です。

一般的なソリューションは次のとおりです。

  • クリックする要素が実際に表示されていることを確認してください。要素を表示するために、ページ上で追加のアクションを行う必要がある場合があります。たとえば、表示されるオプションのドロップダウンを開くか、サブメニューが表示されるメニューを開きます

  • wait for visibility for the element ::

    var EC = protractor.ExpectedConditions;
var mumbaiCity = element(by.id('mumbaiCity'));
browser.wait(EC.visibilityOf(mumbaiCity), 5000);
mumbaiCity.click();

  • 実際には見えない同じidを持つ別の要素があります。この場合、この特定の要素に一致するようにロケーターを改善する必要があります。例えば：

    element(by.css(".city-checkbox #mumbaiCity")).click();
element(by.css(".city-checkbox input[ng-click*=Mumbai]")).click();

  • または、同じロケーターに一致する複数の要素を取得した場合は、 "filter" out visible elementを使用できます。

    var mumbaiCity = element.all(by.id('mumbaiCity')).filter(function (Elm) {
    return Elm.isDisplayed().then(function (isDisplayed) {
        return isDisplayed;
    });
}).first();
mumbaiCity.click();

  • 要素に移動して、 browser.actions() を介してクリックします。

    var mumbaiCity = element(by.id('mumbaiCity'));
browser.actions().mouseMove(mumbaiCity).click().perform();

  • ビューにスクロールする 要素の[次へ]をクリックします。

    var mumbaiCity = element(by.id('mumbaiCity'));
browser.executeScript("arguments[0].scrollIntoView();", mumbaiCity.getWebElement());
mumbaiCity.click();

  • via javascriptをクリックします（ただし、 differences に注意してください）：

    var mumbaiCity = element(by.id('mumbaiCity'));
browser.executeScript("arguments[0].click();", mumbaiCity.getWebElement());

  • 場合によっては、ブラウザウィンドウを最大化するだけで済みます。

    browser.driver.manage().window().maximize();
86
alecxe