Cypress: Github App installation: Clicking on an option menu

[jchuerva]

👋 Hi!! I want to do a test for a GitHub App installation, selecting only one simple repository, in my case repo1

Not sure why I cannot click() or trigger('mouseover') on it.... 🤷‍♂️

it should be something simple as this, right?

    cy.get('.select-menu-modal')
      .find('.select-menu-item')
      .contains('repo1')
      .click()

The step passed but no click/mouseover is performed.

[lilaconlee]

Think you'll want to remove the .find call, then Cypress will look for 'repo1' in the whole .select-menu-modal. Worked on a similar GitHub dropdown, but lemme know if that's not the case.

[jchuerva]

Thanks for your quick response @lilaconlee !!

I've tested as you said:

    cy.get('.select-menu-modal')
      .contains('repo1')
      .click()

and the same result, the click() is not performed and the selection is not done in the dropdown options.

I've also tried to do a mouseover before click on it and same issue.

TBH, it's a very weird situation, as the click() function is working fine in the rest of the buttons...

[bahmutov]

Try adding a wait between contains and click. What I suspect happens is that this popup does not have a chance to add event listeners yet but Cypress already clicks on it. Thus the click gets ignored

Sent from my iPhone

On Nov 6, 2018, at 05:26, Carlos Alarcon [e-mail] wrote:

Thanks for your quick response @lilaconlee !!

I've tested as you said:

cy.get('.select-menu-modal')
  .contains('repo1')
  .click()

and the same result, the click() is not performed and the selection is not done in the dropdown options.

I've also tried to do a mouseover before click on it and same issue.

TBH, it's a very weird situation, as the click() funtion is working fine in the rest of the buttons...

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[jchuerva]

👋 Hi @bahmutov !! Thanks for your help ✨

I've added a wait between contains and click but it does not solve the issue. I've also added a mouseover to see if it solved it, but it doesn't...

• Option 1

    cy.get('.select-menu-modal')
      .contains('repo1')
      .wait(2000)
      .trigger('mouseover', 'center')
      .click()

• Option 2

    cy.get('.select-menu-modal')
      .contains('repo1')
      .wait(2000)
      .click()

• Option 3

    cy.get('.select-menu-modal')
      .contains('repo1')
      .wait(1000)
      .trigger('mouseover', 'center')
      .wait(1000)
      .click()

[jchuerva]

👋 friendly bump here if someone can help me with this...

[lilaconlee]

Any chance you have a reproducible example we could test with? I'm also trying to track down another issue that mentioned unexpected behavior with GitHub UI to see if it could be related.

[jchuerva]

Sure @lilaconlee

Thanks a lot for the quickly answer and your help 🎉

describe('GitHub App installation selecting the repos', function () {

  let user_name = 'AAAA' //Your user
  let user_password = 'AAAA' //your password 
  let repo = 'AAA' // your repo

  //Login
  cy.visit("http://github.com")
  cy.get("a.HeaderMenu-link[href='/login']")
    .click()
  cy.get('#login_field')
    .clear()
    .type(user_name)
  cy.get('#password')
    .clear()
    .type(user_password)
  cy.get('input')
    .contains('Sign in')
    .click()

  //Open app url
  cy.visit("https://github.com/apps/installingcypress")
  //Click on install
  cy.get('.btn')
    .contains('Install')
    .click()
  //This is maybe optional, depends if you are part of a org, you will need to select your user
  cy.get('.Box-row')
    .contains(user_name)
    .click()

  // Select the radio button for selecting the repos
  cy.get('#install_target_selected')
    .click()
  // Expand the repositories dropdown
  cy.get('.select-menu > .btn')
    .contains('Select repositories')
    .click()

  // ************
  // This is the part where I cannot click on the dropdown options 
  // Select the repo with name repo
  cy.get('.select-menu-modal')
    .contains(repo) //This select the repo you want. Check top of code
    .trigger('mouseover') // Just to check where is the mouse
    .parent('.select-menu-item') // Not sure if this is necesary
    .trigger('mouseover') // Just to check where is the mouse
    // .wait(2000) // Suggested in previous comment
    .click() 
})

[jennifer-shehane]

@jchuerva The code you provided fails at the

  //Click on install
  cy.get('.btn')

All of the assets needed to render GitHub properly are not being loaded due to an issue with our handling of SRI. This further explains why we do not advise testing on websites you do not control. If you open your devtools while testing, you will see many resources error on loading.

[lilaconlee]

I was able to reproduce with that code using a GitHub account without 2FA enabled, but haven't been able to figure out a work around.

[jennifer-shehane]

Hey @jchuerva, let me explain myself better. I can't be sure why the code to click on the dropdown is not working, but my initial guess is that there is some JavaScript that is not being properly loaded due to an issue with our handling of SRI.

Could you try implementing our workaround today to see if the blocking of these resources is causing the click issue?

[jchuerva]

👋 Hi @jennifer-shehane I've tried the workaround you mention and I see the same issue... but I've found another functional workaround, so I'm not blocked here anymore and I can select the repo simple searching the repo and then .type('{enter}').

I'm closing this issue as there is a functional workaround for it even if the JavaScript is not detecting the clicking.

Thanks a lot for the help! 😍

[jennifer-shehane]

Great. Our addition of native events support is likely going to fix a lot of unexpected click behavior, so you may want to revisit the click once that is released.

[tomachinz]

One workaround is to use:

.click({ force: true })

Works for navigation but it does not open the menu visually.