angularjs - 在 ionic 应用程序中使用 Protractor 测试后退按钮会产生错误:预期“包含”“后退”

我试图测试量角器中的离子后退按钮，事实证明这确实很困难，因为有两个几乎相同的div。起初，我试图通过ID进行标识，但是当我实际查看生成的代码时，有两个具有相同ID的版本。

量角器代码：

    this.showBackButton=function (arg1) {
        var back = $('button.back-button');
        browser.wait(EC.presenceOf(back), wait);
        return expect(back.getText()).toContain(arg1);
    };
    this.showBackButton('Back');

生成的html：

<div class="nav-bar-block" nav-bar="active">
    <ion-header-bar class="bar-royal bar bar-header" align-title="center">
        <button id="bB" ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item">
            <i class="icon ion-ios-arrow-back"></i>
            <span id="unique"> </span>
            <span class="back-text" style="transform: translate3d(0px, 0px, 0px);">
                <span class="default-title">Back</span>
                <span class="previous-title hide">undefined</span>
            </span>
        </button>
        <div class="buttons buttons-left header-item">
            <span class="left-buttons">
                <button class="button button-icon button-clear ion-navicon hide" menu-toggle="left">
                </button>
            </span>
        </div>
        <div class="title title-center header-item" style="transform: translate3d(0px, 0px, 0px); left: 193px; right: 193px;">
        </div>
        <div class="buttons buttons-right">
            <span class="secondary-buttons">
                <button class="button button-stable ng-binding" ng-click="showQR()">
                    Show My rCard
                </button>
                &nbsp;&nbsp;
                <!-- ngIf: isOnline() && !isSelfServiceEnabled() --><button class="button button-stable ng-binding" ng-if="isOnline() & amp; & amp; !isSelfServiceEnabled()" ng-click="showBalance()">
                    Balance
                </button><!-- end ngIf: isOnline() && !isSelfServiceEnabled() -->
            </span>
        </div>
    </ion-header-bar>
</div>
<div class="nav-bar-block" nav-bar="cached">
    <ion-header-bar class="bar-royal bar bar-header" align-title="center">
        <button id="bB" ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item" style="opacity: 0;">
            <i class="icon ion-ios-arrow-back"></i>
            <span id="unique"> </span>
            <span class="back-text" style="transform: translate3d(0px, 0px, 0px); opacity: 0;">
                <span class="default-title">Back</span>
                <span class="previous-title hide">undefined</span>
            </span>
        </button>
        <div class="buttons buttons-left header-item" style="opacity: 0;">
            <span class="left-buttons">
                <button class="button button-icon button-clear ion-navicon hide" menu-toggle="left">
                </button>
            </span>
        </div>
        <div class="title title-center header-item" style="transform: translate3d(-172.77px, 0px, 0px); left: 68px; right: 68px; opacity: 0;"></div>
        <div class="buttons buttons-right" style="opacity: 0;"></div>
    </ion-header-bar>
</div>

量角器故障：

Failures:
1) r2% -- FEATURE_NAME Scenario: We identify and charge a customer
  Message:
    Expected '' to contain 'Back'.
  Stack:
    Error: Failed expectation
        at E:\xampp\htdocs\cgf\rcredits-mobile\r2.js:212:53
        at ManagedPromise.invokeCallback_ (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:1366:14)
        at TaskQueue.execute_ (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2970:14)
        at TaskQueue.executeNext_ (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2953:27)
        at asyncRun (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2813:27)
        at C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:676:7
        at process._tickCallback (internal/process/next_tick.js:103:7)
  Message:
    Expected '' to contain 'Back'.
  Stack:
    Error: Failed expectation
        at E:\xampp\htdocs\cgf\rcredits-mobile\r2.js:212:53
        at ManagedPromise.invokeCallback_ (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:1366:14)
        at TaskQueue.execute_ (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2970:14)
        at TaskQueue.executeNext_ (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2953:27)
        at asyncRun (C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2813:27)
        at C:\Users\Someone\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:676:7
        at process._tickCallback (internal/process/next_tick.js:103:7)

最佳答案

你可以试试这个吗？因为这在您的情况下似乎是独一无二的

$('div[nav-bar="active"] ion-header-bar button#id="bB"')

我已经基于具有<div>的唯一性返回了此CSS选择器。

希望这会起作用。

关于angularjs - 在 ionic 应用程序中使用 Protractor 测试后退按钮会产生错误:预期“包含”“后退”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43239628/