angularjs - 在 ionic 应用程序中使用 Protractor 测试后退按钮会产生错误 : Expected '' to contain 'Back'

Question

我试图在 Protractor 中测试 ionic 后退按钮，事实证明这真的很困难，因为有两个几乎相同的 div。起初我试图通过id来识别，但是当我实际查看生成的代码时，有两个版本具有相同的id。

Protractor 代码:

    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>

Protractor 故障:

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)

Answer 1

你能试试这个吗？因为这在您的案例中似乎是独一无二的

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

我已经根据父元素的唯一性返回了这个 CSS 选择器 <div>具有“导航栏”属性。

希望这会奏效。