如何单击量角器中的离子选项卡进行 e2e 测试

Question

我希望能够使用 e2e 导航我的 ionic 应用程序。 我正在使用量角器通过 css 绑定元素来执行此操作。 我想制作一个 ion-tab 来进行点击。

element(by.css('.settingTabButton')).click();

我想在 html 中的 ion tab' 类中添加一个 css 属性，以便我可以通过它的 css 属性来获取该元素。

<ion-tab class="settingTabButton" [root]="tab3Root" tabTitle="Settings" 
        tabIcon="md-settings">

当我运行测试时，它报告“失败的元素不可见”：

我认为它失败了，因为 ion-tab 不是按钮，所以你不能在量角器中调用 element.click()？

chrome> 开发者控制台>元素部分：

<ion-tab class="settingTabButton" role="tabpanel" tabicon="md-settings" tabtitle="Settings" ng-reflect-root="function SettingsPage(navCtrl," ng-reflect-tab-title="Settings" ng-reflect-tab-icon="md-settings" id="tabpanel-t0-2" aria-labelledby="tab-t0-2" aria-hidden="true"><div></div><div class="nav-decor"></div></ion-tab>

使用 css 绑定元素是量角器的最佳解决方案吗？

请参阅下面的伪以了解我的实现

tabs.html

<ion-tabs>
    <ion-tab class="settingTabButton" [root]="tab3Root" tabTitle="Settings" 
        tabIcon="md-settings">
    </ion-tab>
</ion-tabs>

tabs.scss：

.settingTabButton.important {

}

在 tabs.ts 中：

@Component({
  templateUrl: 'tabs.html',
  styleUrls: ['/tabs.scss']
})

example.e2e-spec.ts

describe('Login', () => {
    beforeEach(() => {
      page.navigateTo('http://localhost:8100/');
    });

    it('as unregistered user be able to navigate to setting screen', () => {
        element(by.css('.settingTabButton')).click().then(() => { // fails         here 
        expect(true).toBe(true);
      });
    });

 })

Answer 1

最后我的解决方案是阅读 chrome 开发者控制台。我注意到每个选项卡都有一个与之关联的 id

<a ... id="tab-t0-0" ...</a>

所以我创建了一个标签页对象来通过它的 id 获取每个标签按钮：

getHomeTab(){
return element(by.id('tab-t0-0')).getWebElement();

}

然后我用它在每个相应的页面对象中导航：

export class SettingPagePo {
    navigateTo(){
    var tab = new TabPagePo;
    tab.getSettingsTab().click();
    browser.driver.sleep(500);
    }
}

Answer 2

请尝试：

element(by.css('.settingTabButton')).click();

因为 settingTabButton 是一个类名，所以它前面需要一个点。 ".settingTabButton"

Answer 3

在你可以点击一个（tab-）按钮之前，你需要保证它已经被渲染了。我遇到了同样的问题，发现量角器有一个库 ExpectedConditions，可以帮助你：http://www.protractortest.org/#/api?view=ProtractorExpectedConditions。

在您的情况下，解决方案可能如下所示：

import {ExpectedConditions, by, element} from 'protractor';
describe('Login', () => {
    beforeEach(() => {
      page.navigateTo('http://localhost:8100/');
    });

    it('as unregistered user be able to navigate to setting screen', () => {
        let settingTabButton= await waitForClickability('.settingTabButton');
        await browser.actions()
        .mouseMove(settingTabButton)
        .click()
        .perform();
      });
    });

 })

 async function waitForClickability(selector){
    let el = element(by.css(selector));
    await browser.wait(ExpectedConditions.elementToBeClickable(el), 5000);
    return el;
  }