Cliquer sur une liste déroulante de portée dans testcafe

Question

J'utilise testcafe dans une application React et j'ai du mal à faire en sorte que testcafe clique sur une option du menu déroulant Reach.

Je peux accéder à l'option avec Selector après avoir déclenché un clic sur le bouton qui active le menu déroulant, mais le fait de cliquer sur l'option souhaitée ne semble rien faire du tout.

Cependant, l'action est déclenchée si j'atteins l'option par les touches.

//This works
await t
    .click('[testid="menuButton"]')
    .pressKey('down')
    .pressKey('down')
    .pressKey('enter'); 

//This doesn't
  await t
    .click('[testid="menuButton"]')
    .click('[data-reach-menu-item]:nth-of-type(3)');

Je me suis assuré que la sélection se fait correctement dans le second cas, donc cela ne semble pas être le problème.

Des idées ?

Merci !

Answer 1

Ce test est exécuté avec succès de mon côté :

import { Selector } from 'testcafe';

fixture `fixture 1`
    .page `https://reacttraining.com/reach-ui/menu-button/`
test('test', async t => {
    await t
        .click('[data-reach-menu-button]')
        .click('[data-reach-menu-item]:nth-of-type(3)');
})

Il se peut qu'il y ait plus d'un bouton de menu sur votre page et que le sélecteur "[data-reach-menu-item]:nth-of-type(3)" pointe vers un élément invisible. Pour vérifier cela, insérez .debug() après .click('[testid="menuButton"]') dans votre code :

  await t
    .click('[testid="menuButton"]')
    .debug()
    .click('[data-reach-menu-item]:nth-of-type(3)');

Après que le code de test s'arrête à debug(), ouvrez la console de développement du navigateur, exécutez la commande document.querySelectorAll('[data-reach-menu-item]:nth-of-type(3)') et vérifiez si le premier nœud renvoyé correspond au troisième élément de la liste déroulante du menu.