[Integration Testing] Add cypress to the main generator

[sendilkumarn]

Overview of the feature request

Cypress is awesome, it is debuggable and it is easy and framework agnostic.

Motivation for or Use Case

Protractor is flaky for react, while there were multiple attempts to fix them. I think it is a high time to move away from the protractor and start using Cypress.

Related issues or PR

#11923 #11916 #11814 and others

There are a lot of discussions happened before especially this one :: jhipster/jhipster-vuejs#399

I have also started the migration in this branch, let us merge both into the main generator and start using Cypress.

• Checking this box is mandatory (this is just to show you read everything)

[pascalgrimaud]

cc @nassimerrahoui and @adilabed as they already did it for JHipster Control Center, and nearly finished the work from @clementdessoude in Vue.js blueprint

Then, @sendilkumarn, I would suggest to add Cypress for v6 if possible AND remove Protractor in v7

[sendilkumarn]

Then, @sendilkumarn, I would suggest to add Cypress for v6 if possible AND remove Protractor in v7

@pascalgrimaud I like this idea.

@nassimerrahoui, @adilabed & @clementdessoude

Can we start working on this in a branch (likely this one) or any other (instead of duplicating work) ? WDYT?

[adilabed]

Can we start working on this in a branch (likely this one) or any other (instead of duplicating work)? WDYT?

I am in favor of concentrating our efforts in this branch https://github.com/sendilkumarn/generator-jhipster/tree/feat/add-cypress, instead of duplicating work.

[nassimerrahoui]

Then, @sendilkumarn, I would suggest to add Cypress for v6 if possible AND remove Protractor in v7

@pascalgrimaud I like this idea.

@nassimerrahoui, @adilabed & @clementdessoude

Can we start working on this in a branch (likely this one) or any other (instead of duplicating work) ? WDYT?

Yes, it's sounds good to me ! 👍

[nassimerrahoui]

As discussed with other members, there is 3 solutions :

• Write e2e Cypress tests for each framework like Protactor

• Instead of writing e2e tests for each framework, maybe we can use specific attributes to select elements and write common e2e tests for all frameworks including Vuejs blueprint (cf. Cypress documentation for selecting elements)

• Create a sub generator for e2e tests

[clementdessoude]

I like the idea of targetting specific attributes for selecting elements. In the end game, it will:

• guarantee an uniformisation between each framework used (frontend+backend)
• ease the burden of maintaining the e2e tests

[sendilkumarn]

I am all in for targeting specific attributes for selecting elements. But it will be a pain to maintain it across blueprints and an unwanted dependency to carry forward. I am all in if we can find a way around it.

But yeah the main generator should have only one cypress test suite. Let us refactor it. I will create a project in that repo, feel free to pick whatever you like and we will ship it 👍 Looking forward to it already.

[Edit] The project is available here

[jdubois]

Adding a $100 bug bounty as proposed by @MathieuAA on #11805

[avdev4j]

hi @sendilkumarn
it seems the Cypress feature has moved forward and we have some test cases available. I would like to help you and @nassimerrahoui @adilabed to complete the feature and to having it in our first v7 release.

WDYT? Have you any idea of what is in to do?

I have checked this branch https://github.com/sendilkumarn/generator-jhipster/tree/feat/add-cypress and this project https://github.com/sendilkumarn/generator-jhipster/projects/1

regards,

EDIT:
After some discussion, this is the plan with @nassimerrahoui and @adilabed

• Add oauth2 tests in Cypress e2e generated tests
• Open a merge request from @sendilkumarn branch to master
• Deprecate Protractor as test framework
• Open a new ticket if we want to add more e2e tests (missing from protractor implementation)

Does it seems a good strategy ?

[avdev4j]

Finally we move the cypress current work to my JHipster fork because we were not able to rebase from last master version. A draft PR has been open here. We need to:

• Check 2e2 sub-generator since core mechanism has been deeply rework
• Add Vue Cypress tests
• Add generator unit tests
• Deprecate protractor and remove ** in development** label for Cypress

[pascalgrimaud]

increasing the bounty as it's a lot of work to achieve it

[pascalgrimaud]

It's a lot lot lot of work to achieve this, and it was a team work.
So I increase the bounty to 600, and propose this split:

• @nassimerrahoui : 250 as main lead
• @adilabed : 150 as co main lead
• @mshima : 100 for fix and review
• @qmonmert : 100 for test and review

@avdev4j : it was during your full time contribution to JHipster

Hope you're ok with this.
Ping me when you claim the bounty, so I can check and approve.

As the work is achieved, let's close this.
Again, congrats all contributors !

[avdev4j]

Let's do that! Congrats everyone

[nassimerrahoui]

@pascalgrimaud : Bounty claimed https://opencollective.com/generator-jhipster/expenses/24786

[adilabed]

@pascalgrimaud : Bounty claimed https://opencollective.com/generator-jhipster/expenses/24787

[pascalgrimaud]

@nassimerrahoui @adilabed : approved

[qmonmert]

@pascalgrimaud : Bounty claimed https://opencollective.com/generator-jhipster/expenses/24793

[pascalgrimaud]

@qmonmert : approved

[tillias]

Are there any examples available of how to use cypress with JWT Token?

I can't pass through jhi related stuff because something really cheesy is customized there:

let jwt_token

before(function fetchUser() {
    cy.request('POST', '/api/authenticate', {
        username: 'user',
        password: 'user',
    })
        .its('body')
        .then((res) => {
            jwt_token = res.id_token
        })
})

beforeEach(function setUser() {
    cy.visit('/', {
        onBeforeLoad(win) {
            win.sessionStorage.setItem('jhi-authenticationtoken', jwt_token)
        }
    })
})

describe('test', () => {
    it('check login works programmatically', () => {
        cy.visit('/');
        cy.get('.lead').should('have.text', 'Here is microservices catalog');
        cy.get('#home-logged-message').should('have.text', 'You are logged in as user "user".')
    })
})

First of all I have noticed that instead of local storage session storage is used. But I really don't have any ideas why code above is not working, cause I'm setting id_token exactly as if it will be normal login

https://stackoverflow.com/questions/64714984/jhipster-programatically-login-using-cypress-and-jwt