使用量角器进行端到端测试时如何单击离子选项卡

Question

我尝试了很多方法，但仍然有问题。这是我的 tabs.html

<ion-tab class="tab1" [root]="tab1Root" tabTitle="Forum"    tabIcon="home"></ion-tab>
<ion-tab class="tab2" [root]="tab2Root" tabTitle="Chat"     tabIcon="information-circle"></ion-tab>
<ion-tab class="tab3" [root]="tab3Root" tabTitle="MyOLLE"   tabIcon="contacts"></ion-tab>

这是我的第一个标签。e2e-spec.ts

var chat = element(by.tagName('ion-tab[tabTitle="Chat"]')).getWebElement();
browser.actions().mouseMove(chat).click().perform();
browser.sleep(6000);

以上代码的问题在于，在运行测试时，实际上并没有进入到聊天页面。

我的第二次测试

var chat = element(by.tagName('ion-tab[tabTitle="Chat"]'));
chat.click();

这会告诉我

Failed: element not visible

谁能告诉我如何单击选项卡或如何重定向到我想要的页面？

Answer 1

如果是茉莉量角器可以试试这个

element(by.className('.tab2')).click();

或

get chatTab() {return $(.tab2);}
// This is the normal 
// Page Object
// Model
public chatClick()
{
chatTab().click();
}

Answer 2

ionic 的每个选项卡都有一个 id。打开开发工具就可以看到。要导航到我创建此方法的选项卡：

import {element, by} from 'protractor';

navigateToTab(tabName: 'Forum' | 'Chat' | 'MyOLLE') {
    let id;
    switch(tabName) {
        case 'Forum':
            id = 'tab-t0-0';
        break;
        case 'Chat':
            id = 'tab-t0-1';
        break;
        case 'MyOLLE':
            id = 'tab-t0-2';
        break;
    }
    return element(by.id(id)).getWebElement().click();
}

希望对您有所帮助。如果您有任何问题，请告诉我

使用量角器进行端到端测试时如何单击离子选项卡

how to click ion-tabs when use protractor for e2e test

protractor

ionic-framework

e2e-testing

angular