CODEWITHSUNDEEP
htmlcssprotractorionic3karma-jasmine
Daniel
Daniel

Reputation: 2288

How to click ion tab in protractor for e2e testing

I want to be able to navigate my ionic app using e2e. I am doing this using protractor, by binding element by css. I want to make an ion-tab to make a click.

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

I wanted to add a css attribute to an ion tab' class in the html so that i could grab that element by its css attribute. 

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

When I run the test it reports "Failed element not visible":

I think it is failing because ion-tab isn't a button so you can't call element.click() in protractor?

chrome> Developer console >elements section : 

<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>

Is binding to elements using css the best solution for protractor?

See below pseudo for my implementation

tabs.html

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

tabs.scss:

.settingTabButton.important {

}

in the 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);
      });
    });

 })

Upvotes: 2

Views: 1015

Answers (3)

Daniel
Daniel

Reputation: 2288

My solution in the end was to read the chrome developer console. I noticed that the tabs each had an id associated with them

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

So I created a tab page object to get each tab button by its id:

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

}

And then I used that to navigate in each respective page object:

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

Upvotes: 2

Sascha
Sascha

Reputation: 1849

Before you can click a (tab-)button, you need to guarantee that it is already rendered. I had the same problem and found out that protractor has a library ExpectedConditions, which can help you out: http://www.protractortest.org/#/api?view=ProtractorExpectedConditions.

In your case the solution might look like this:

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;
  }

Upvotes: 0

Sandy_22
Sandy_22

Reputation: 117

Please try:

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

Since settingTabButton is a class name, it requires a dot in front of it. ".settingTabButton"

Upvotes: 0

Related Questions