select(); does not work on a select box of type select2

[MiouMiou-afk]

Current behavior

I am testing a form that I need to fill in, there are two selects in this form. I manage to select the first but Cypress refuses to select the second. I also regularly have problems with select2, very often Cypress does not recognize them and therefore my tests do not pass.
It's not a problem of use because I never have problems with the classic "select", I know how to test them with Cypress. But I want to point out that Cypress has an unstable behavior with select2

Desired behavior

Desired behavior is for Cypress to recognize select2 values

Test code to reproduce

my test :

`import { crewMemberProfile } from './../test-data/user-data';

describe('As a production logged', () => {
    beforeEach(() => {
        cy.loginAsProductionCoordinator();
        cy.visit('/');
    });

    after(() => {
        cy.logout();
    });

    it(' I can create a new technician ', () => {
        cy.get('[data-e2e="layout-menu-crewlist"]').click();
        cy.get('[data-e2e="directory"]').click();
        cy.get('[data-e2e="add-newuser"]').click();
        cy.get('[data-e2e="fname"]').type(crewMemberProfile.fname3, { force: true });
        cy.get('[data-e2e="lname"]').type(crewMemberProfile.lname3, { force: true });
        cy.get('[data-e2e="phone"]').type(crewMemberProfile.phone, { force: true });
        cy.get('[data-e2e="email"]').type(crewMemberProfile.mail, { force: true });
        cy.get('[data-e2e="email_pro"]').type(crewMemberProfile.mailPro, { force: true });
        cy.get('[data-e2e="department"]').select(crewMemberProfile.dept, { force: true });
        cy.get('[data-e2e="job"]').select(crewMemberProfile.job3, {force:true});
        cy.get('[data-e2e="gdrp"]').click();
        cy.get('[data-e2e="new"]').click();
        cy.contains(crewMemberProfile.fname3.toLowerCase() + ' ' + crewMemberProfile.lname3.toLowerCase());
        cy.contains(crewMemberProfile.phone);
        cy.contains(crewMemberProfile.mailPro);
        cy.contains(crewMemberProfile.dept);
        cy.contains(crewMemberProfile.mail);
    });
});
`

Mon user-data.js :

`const crewMemberProfile = {
    lname: 'Tim',
    job: 'real',
    phone: '06 7* ** ** 45',
    email: 'd***n@gmail.com',
    searchName: 'Golic',
    mail: 'm@cin.fr',
    fname2: 'Myms',
    lname2: 'Ag',
    fname3:'Anna',
    lname3:'Sou***i',
    mail3:'annadu13@yopmail.com',
    mailPro:'annadu34@yopmail.com',
    dept: 'production',
    job3:'auteur plateau'
};`

my inspector:

and my views :

`           <div class="form-group">
                            <label for="department-select">{{__ 'department'}}*</label>
                            <select class="form-control text-capitalize require-check" name="department"
                                onchange="checkRequiedField(event)" id="dept-select" data-e2e="department" required>
                                <option></option>
                                {{#each config.hrdepartments}}
                                    <option value="{{this}}" {{#if (eqnocase ../department this)}}selected{{/if}}>
                                        {{__ this}}
                                    </option>
                                {{/each}}

                            </select>

                        </div>
                        <div class="form-group">
                            <label for="job-select">{{__ 'job'}}</label>
                            <select class="select2 form-control" name="job" id="job-select" tabindex="-1"
                                onchange="checkRequiedField(event)" data-e2e="job" >
                                <option></option>
                                {{#each jobs}}
                                    {{#if name}}
                                        <option value="{{name}}" selected>{{name}}</option>
                                    {{/if}}
                                {{/each}}
                            </select>

                        </div> 
                        `

Cypress Version

12.5.1

Node version

16.9.1

Operating System

Windows 11

Debug Logs

No response

Other

No response

[lmiller1990]

I tried to reproduce with a minimal example using select2, but it worked for me:

/// <reference types="cypress" />
describe('page', () => {
  it('works', () => {
    cy.visit('https://select2.org/getting-started/basic-usage')
    cy.get('.js-example-basic-single').select('California', { force: true })
  })
})

Your code looks fine to me. I wonder if it is related to some kind of dynamic/async rendering via your framework or view library. What is the rest of your stack? Can you provide a minimal GitHub repository demonstrating the issue, so I can debug a bit more locally?

[MiouMiou-afk]

Hello thank you for your quick feedback, my stack is for the view: Handlebars (+bootstrap), for the back: Node.js (Mongodb for the database). I'm not authorized to provide you with a Github repository, I'm sorry about that.

[MiouMiou-afk]

I've find a solution, I don't use data-e2e but I use the class of my tags as a selector (with the cypress selector), so I created a command with arguments that will test all the select2 in my project. Here is what worked for me:

`// In my support/command.js : I created a command that takes two arguments :

Cypress.Commands.add('select2', (position, type) => {

    cy.get(':nth-child('+position+') > .select2-container > .selection > .select2-selection').click();
    cy.get('.select2-results__option--highlighted').type( type + '{enter}{enter}');

});

`
That way in my tests I can use this command by putting the index of my nth-child as the first argument and the second argument what I want to select in my select. It's a workaround but it works.

cy.select2(position, type);

I hope this will help devs who can't get cypress to work with a select2. I am French, so I apologize for my English, I hope I was understandable :)
Thanks

[lmiller1990]

Glad you found a solution - this should "just work" (like in the example I showed). If you are able to make a minimal repo one day, happy to take a look. Until then, I don't know if I can do much else around Cypress and select2, so I'll close this one.