Protractor cannot find element by css ion tab

Ionic Framework ionic-v3
1

I want to be able to navigate app using e2e by binding to the tab button to make a click.

I wanted to name a ion tab in the html so that i could grab that element by its css attribute.
The issue is that the “class” in the inspector on chrome keeps doesn’t say the class is inheriting settingTabButton so I am not able to test it.

Any ideas?
See below pseudo for my implementation

like so:

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

tabs.html

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

then in the tabs.scss:

.settingTabButton.important {

}

in the tabs.component.ts :

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

Did you ever figure this out? Do you have any general reference for testing Ionic apps?