web-dev-qa-db-fra.com

sélectionnez l'option de liste déroulante réagir-sélectionner à l'aide de cyprès

Quelqu'un sait-il comment sélectionner une option dans une liste déroulante React-Select dans un test de cyprès?

J'ai essayé plein de trucs mais en vain.

Il semble que React-Select utilise une entrée cachée. Ce cyprès ne peut pas y écrire. Et les divs sur lesquels le cyprès ne peut pas non plus écrire.

Cela n'aide pas non plus que je ne sache pas comment inspecter la liste déroulante réelle dans les outils de développement car elle ne reste pas ouverte.

J'utilise:

  • réagir-sélectionner v2.4.1
  • cyprès v3.1.5

Modifier 1:

La réponse de @ bkucera fonctionne. Le code de travail que j'ai fini était:

it('updates Person', () => {
    cy.get('[data-id=bearbeiter]')
      .find('.css-10nd86i')
      .click()
      .find('input')
      .eq(1)
      .focus()
    cy.contains('Test Tester').click({ force: true })
  })

J'ai dû ajouter une .eq(1) après find car il semble y avoir deux entrées.

Modifier 2:

La solution ci-dessus a fini par cliquer sur les éléments de l'arborescence de navigation de mon site qui contenaient le même texte. Donc pas de cigare :-(

Modifier 3:

J'ai également essayé cette solution:

Cypress.Commands.add('setSelectOption', ({ selector, option, value }) => {
  cy.get(selector)
    .find('.css-10nd86i input')
    .eq(1)
    .focus()
    .type(value, { force: true })
})

... mais même si force: true est utilisé, j'obtiens cette erreur:

The element typed into was:

  > <input name="aeId" type="hidden" value="862333db-31cf-444c-b8ea-021c640c7a44">

Cypress considers the 'body', 'textarea', any 'element' with a 'tabindex' or 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid typeable elements.

Édition 4:

Jusqu'à présent, cela a fonctionné le mieux:

Cypress.Commands.add('setSelectOption', ({ selector, option, value }) => {
  cy.get(selector)
    .find('.css-10nd86i input:text')
    .focus()
    .type(option, { force: true, delay: 600, timeout: 330000 })
    .type('{enter}', { force: true })
  cy.get(selector)
    .find('.css-10nd86i')
    .find('input')
    .eq(1)
    .should('have.value', value)
})

Au moins, cela fonctionne pour les listes restreintes. Le texte est entré lentement. Pour notre liste d'espèces (7000 de long), j'ai ajouté ces options delay et timeout. Le délai semble aider, mais je n'ai pas pu comprendre exactement comment ces options influencent le comportement. Et parfois, le cyprès expire :-(

Édition 5:

Pendant ce temps (react-select v3.0.4, cypress v3.3.2) tous les tests échouent car:

Expected to find element '.css-10nd86i' but never found it

Je suppose que la classe a changé. Pas étonnant avec une solution aussi fragile :-(

cypressreact-select
8
Alex

Vous devez d'abord cliquer pour ouvrir la liste déroulante React-Select, puis cliquer sur l'élément réel que vous souhaitez ouvrir. Nous utilisons cette syntaxe pour cela:

cy.get('.s3p-react-select__indicator').eq(1)
  .click()
cy.get('[id^="react-select-"]').contains('<value_dropdownbox>')
  .click()

Et il utilise en effet des champs de saisie cachés. Pour trouver le champ de saisie caché, ouvrez vos outils de développement, choisissez les éléments et recherchez "input [type = 'hidden']".

Enfin une réponse à votre dernière question:

Cela n'aide pas non plus que je ne sache pas comment inspecter la liste déroulante réelle dans les outils de développement car elle ne reste pas ouverte.

Essayez de télécharger le React sélectionnez le plug-in de développeur pour Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Si vous avez ouvert vos outils de développement Chrome Chrome, cliquez sur l'onglet React. Maintenant, cliquez avec le bouton droit sur votre élément React et choisissez inspecter l'élément. Vous voyez toutes les options que vous pouvez faire pour cet élément. Mais il ne sélectionnera probablement pas l'élément correct à la fois, alors recherchez l'élément avec la case à cocher "menuIsOpen", et vérifiez-le. La liste déroulante restera ouverte jusqu'à ce que quelque chose change la page

1
Mr. J.

Sur Cypress 4.2.0 et react-select 3.0.8, appuyer deux fois sur Entrée fonctionne pour moi:

cy.get('#react-select-component-id').type('Something{enter}{enter}');
0
Mark Jackson

Passez l'ID pour réagir-sélectionnez et trouvez-le comme:

    cy.get('#country').within($el => {
    cy.wrap($el)
        .click()
        .find('div[tabindex*="-1"]')
        .first()
        .click();
    });

Donc, commencez par interroger l'élément, enveloppez-le et déclenchez l'événement click, puis utilisez simplement l'un des accessoires de données que chaque élément possède, je suis allé avec tabindex -1 puisque chaque élément l'a, utilisez eq (x) si vous avez besoin de élément.

0
Goran Jakovljevic

Dans mon cas, cela a aidé:

cy.get("[for=country]")
        .click() 
        .type("Poland{enter}");

Mais n'oubliez pas que je clique sur l'étiquette, qui se concentre bien sur l'entrée de sélection de réaction.

0
Marcin

J'utilise Cypress 4.2.0, je suis capable de faire les commandes de chaîne suivantes:

Cypress.Commands.add('selectDropdownlist', (dropDownSelectionId) => {
cy.get('[data-id=bearbeiter]').click({force: true})
.get(`[id="${dropDownSelectionId}"]`).click() //the id or any selector of the value 'Test Tester'
})
0
ebanster

Hé les gars, j'ai cette solution ici:

"cypress": "^3.4.1"
"react-select": "^2.4.3"

cy
 .get('[class*="-control"]')
 .click(0, 0, { force: true })
 .get('[class*="-menu"]')
 .find('[class*="-option"]')
 .eq(2)
 .click(0, 0, { force: true })
0
Airton