E2E Testing on ion-select, ion-option


#1

Hello,
I’m trying to do end-to-end testing on a drop-down menu list (ion-select), and I’m getting an error.
This is what my html looks like:

<ion-label>Select group: </ion-label>
<ion-select formControlName="group_id" interface="popover" class="group-select">
    <ion-option *ngFor="let item of items" [value]="item" class="select-option">{{item}}</ion-option>
</ion-select>

‘items’ is an observable list of items coming from a Firebase database.

In my tests I have 2 helper methods:

getDropDownItemSelection(){
    return element(by.css('.group-select'));
}
getFirstOptionInDropDown(){
     return element(by.css('.select-option'));
}

and my actual test code is:

it('should select an item from the drop down list', () => {
    helperMethodsPageObject.getDropDownItemSelection().click();
    browser.driver.sleep(1000);
    helperMethodsPageObject.getFirstOptionInDropDown().click();
    browser.driver.sleep(1000);
});

When running the test, the ion-select is clicked and the list of items shows as expected. However, the error occurs when trying to click on a specific item in that list.

Any suggestions?

Many thanks,


#2

What error exactly is happening?
Are you sure the element you get by .select-option itself is clickable?

Looking again at the generated HTML on the device might help:
Follow these instructions here to debug the problem in Safari dev tools:
https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools:
https://ionic.zone/debug/remote-debug-your-app#android

(iOS or Android by the way?)


#3

The error I get is:

- Failed: No element found using locator: By(css selector, .select-option)

I made sure there were no typos in my class name, and yet it still gives me that error.

When I clicked on ‘inspect elements’ in my chrome browser, I couldn’t find the class name I defined. Instead I found some complex html with tags I haven’t written myself. I guess it’s the ionic framework generating the html behind the scenes different to the html I’ve written.

I am debugging my code using ‘ionic serve’, which gives me the Android version of the app in the browser.


#4

Yep, that’s close enough.

Your error is not happening when clicking the item, but really when you try to find it in the first place. You will either have to look for the element in the generated code and select that one, or for example add a unique id to the ion-option (in your code) you want to use (in your test).