Select a Select element using contains in Cypress

Question

I have the following code from which i have to select 'Role 1' The problem I have is that the addition '+4' is changing or even not present. The cypress code i use is but it doesnt work because it's completely similar to the text in the dropdown:

cy.get('[ng-model="ctrl.userModel.selectedJobTitle"]').select('Role 1')

Does anyone has a clue how to select an select element using contains()

<select ng-model="ctrl.userModel.selectedJobTitle">
<option label="Role 1  +4" value="object:401">Role 1  +4</option>
<option label="Role 2 (Standaard) +2" value="object:402" selected="selected">Role 2 (Standaard) +2</option>
<option label="Role 3 +3" value="object:403">Role 3 +3</option>
<option label="Role 4 " value="object:404">Role 4 </option>
<option label="Role 5 " value="object:405">Role 5 </option></select>

pavelsaman · Accepted Answer · 2021-05-11 12:26:47Z

2

You can select based on value:

cy.get('[ng-model="ctrl.userModel.selectedJobTitle"]').select('object:401');

If the value changes as well, I'd try selecting by a part of the text that doesn't change:

cy.get('[ng-model="ctrl.userModel.selectedJobTitle"]')
  .find('option')
  .contains('Role 1')
  .as('selectOption')
  .then(() => {
    cy.get('[ng-model="ctrl.userModel.selectedJobTitle"]')
      .select(`${this.selectOption.text()}`);
  });

edited May 11, 2021 at 12:26

answered May 11, 2021 at 12:16

pavelsaman

8,4321 gold badge19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jasper Slokker Over a year ago

Forgot to tell that they change as well. Sorry.

pavelsaman Over a year ago

@JasperSlokker: ok, updated my answer, it should work now even when some part of the text changes.

Jasper Slokker Over a year ago

UserObject.jobTitleDropdown() 				.find('option') 				.contains(role) 				.as('selectOption') 				.then(()=> { 					UserObject.jobTitleDropdown() 						.select(`${this.selectOption.text()}`); 			});

This is showing an error 'Cannot read property 'selectOption' of undefined'

pavelsaman Over a year ago

@JasperSlokker: That's not the code I shared. .contains(role), I don't see role variable anywhere. That could be a problem.

Jasper Slokker · Accepted Answer · 2021-05-11 14:47:59Z

0

@pavelsaman you're right, the complete function looks like this:

selectRoleNotStandard: (role) => {
        UserObject.userMenuButton().click();
            
        UserObject.jobTitleDropdown()
            .find('option')
            .contains(role)
            .as('selectOption').then (() => {
UserObject.jobTitleDropdown().select(`${this.$selectOption.text()}`)
            });
            UserObject.userMenuButton().click();
        }

It doesn't seem to recognize the alias 'selectOption'

answered May 11, 2021 at 14:47

Jasper Slokker

892 silver badges14 bronze badges

Collectives™ on Stack Overflow

Select a Select element using contains in Cypress

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related