web-dev-qa-db-fra.com

Comment faire exactement avant et avant de travailler à Cypress?

Je pense que je manque quelque chose à propos de la façon dont les fonctions avant et avant que les fonctions travaillent dans le cyprès. J'ai un fichier de spécification qui charge des données d'un appareil dans la méthode avant. Certaines de ces données sont utilisées dans la fonction avant, puis à nouveau dans la fonction avant, ainsi que dans les tests réels. Le fichier de spécifications contient 2 tests. Le premier test s'exécute comme prévu. La seconde échoue parce que l'achevin a déclaré que l'une des valeurs de l'appareil est indéfinie.

Mon attente est que si je charge des données d'un luminaire dans la méthode avant, il devrait être disponible pour tous les tests dans le fichier de spécifications.

Lors de l'exécution du test "Vérifier l'état de la barre de boutons" tester la fenêtre.Console.log (this.user_data) dans la fonction à l'autre éclaire de l'utilisateur_data comme prévu.

Lors de l'exécution du test "Soumettre le formulaire", testez la fenêtre.Console.log (this.User_Data) dans les sorties de fonction avant-même non définies et que le test s'arrête.

Qu'est-ce que j'oublie ici?

describe('Customer Profile', () => {

    before(function () {
        window.console.log('Enter the before function')
        // Load the fixture data. Its asynchronous so if we want to use it right here and now
        // we have to put the things that use inside a callback to be executed after the data
        // loaded. 
        cy.fixture('user').as('user_data').then(function (){
            window.console.log('Fixture has loaded the user data')
            cy.visit('/LaunchPad/login')
            // Fill out the login form
            cy.get('input[name="username"]').type(this.user_data.username)
            cy.get('input[name="password"]').type(this.user_data.password)
            cy.get('button[type="submit"]').click()
        })
    })

    beforeEach(function(){
        window.console.log('Enter the beforeEach function')
        window.console.log(this.user_data)
        // Preserve the cookies for all tests in this suite
        Cypress.Cookies.preserveOnce('SESSION')
        // Open the profile view
        cy.visit('/Manager/'+this.user_data.org+'/config/company-profile')
    })

    it('Check the state of the button bar', function(){
        window.console.log('Running test of button bar')
        cy.get('section.content-header > h1').contains('Company Profile Details')
        // Check the state of the action bar and its buttons
        cy.get('section.action-bar').get('label.btn.btn-sm.btn-primary').contains('Save')
            .should('have.attr', 'for', 'submit-form')
            .should('have.attr', 'tabindex', '0')

        cy.get('section.action-bar').get('#resetButton').contains('Reset')
            .should('have.attr', 'type', 'reset')
            .should('have.attr', 'value', 'Reset')
            .should('have.class', 'btn btn-sm btn-default')

        cy.get('section.action-bar').get('a.btn.btn-sm.btn-default').contains('Cancel')
            .should('have.attr', 'href', '/Manager/'+this.user_data.org+'/')

        cy.get('section.action-bar').get('a').contains('Delete').should('not.exist')

    })

    // This form has no required fields and no validation. So just pick a value or two
    // submit the form and verify the banner is correct
    it('Submit form', function(){
        window.console.log('Running the submit form test')
        cy.fixture('company_profile').as('company_profile')
        cy.get('#companyProfileDto.name').type(this.company_profile.name)
    })


})

MISE À JOUR Après avoir fait plus de lecture en fonction de ce que Carlos Alfredo a répondu avec je suis venu cela. 1. Je dois toujours visiter la page de connexion. Nous utilisons le CSRF et le serment et essayons d'obtenir un exemple de travail consiste à prendre trop de temps. 2. Je dois utiliser Whitelisting pour le cookie de la session car preserveoince ne fonctionne pas du tout.

Voici les fichiers que j'ai maintenant. Il visit la page de connexion une fois et obtient la configuration des cookies de session. Les deux tests procèdent comme prévu.

support/index.js

before(function(){
    cy.login('bob', 'password')
    cy.fixture('user').as('user_data')
    cy.fixture('company_profile').as('company_profile')
})

beforeEach(function(){
    window.console.log('Enter the global beforeEach function')
    // Load the fixture data

})

support/Commandes.js

/*
    We visit the login form despite what the best practise recommendation is because
    we have OAUTH redirects and a CSRF token to deal with. Since the majority of the
    examples and working use cases provided dont deal with those scenarios this is 
    the best I can do at the moment. 
*/
Cypress.Commands.add('login', (username, password, options = {}) => {
    cy.visit('/LaunchPad/login')
    // Fill out the login form
    cy.get('input[name="username"]').type(username)
    cy.get('input[name="password"]').type(password)
    cy.get('button[type="submit"]').click()
})
/*
    We are white listing the cookie because Cypress.Cookies.preserveOnce('SESSION') 
    does not work. https://github.com/cypress-io/cypress/issues/2952

    Because we are forcing Cypress to not clear the cookies, you will have to close
    the test window after the suite is completed other wise the Vision360 apps will
    think your session is alive.
*/
Cypress.Cookies.defaults({
    whitelist: 'SESSION'
})

intégration/Customer_Profile/Customer_Profile_Spec.js

describe('Customer Profile', () => {

    it('Check the state of the button bar', function(){
        window.console.log('Running test of button bar')

        cy.visit('/Manager/'+this.user_data.org+'/config/company-profile')

        cy.get('section.content-header > h1').contains('Company Profile Details')
        // Check the state of the action bar and its buttons
        cy.get('section.action-bar').get('label.btn.btn-sm.btn-primary').contains('Save')
            .should('have.attr', 'for', 'submit-form')
            .should('have.attr', 'tabindex', '0')

        cy.get('section.action-bar').get('#resetButton').contains('Reset')
            .should('have.attr', 'type', 'reset')
            .should('have.attr', 'value', 'Reset')
            .should('have.class', 'btn btn-sm btn-default')

        cy.get('section.action-bar').get('a.btn.btn-sm.btn-default').contains('Cancel')
            .should('have.attr', 'href', '/Manager/'+this.user_data.org+'/')

        cy.get('section.action-bar').get('a').contains('Delete').should('not.exist')

    })

    // This form has no required fields and no validation. So just pick a value or two
    // submit the form and verify the banner is correct
    it('Submit form', function(){
        window.console.log('Running the submit form test')
        cy.visit('/Manager/'+this.user_data.org+'/config/company-profile')

        // Fill and submit the form
        cy.get('input#companyProfileDto\\.name').clear().type(this.company_profile.name)
        cy.get('section.action-bar').get('label.btn.btn-sm.btn-primary').contains('Save').click()

        // Check the response
        cy.get('.callout-success').contains('Your changes are saved.')
        cy.get('input#companyProfileDto\\.name').should('have.value', this.company_profile.name)
    })

})
javascriptcypress
5
RhythmicDevil

On dirait que la cyprès nettoie votre fixtures pour chaque test.

Des guides de cyprès (- https://docs.cpress.io/guides/references/best-practices.html#dangling-state-is-yourafrfrfrfrfrfrfrfrfrfre )

"Nous avons construit Cypress pour soutenir ce cas d'utilisation. En fait, Cyprès ne nettoie pas son propre état interne lorsque le test se termine. Nous voulons que vous ayez un état pendant à la fin du test! Des choses comme des talons, des espions, même des itinéraires ne sont pas supprimés à la fin du test. Cela signifie que votre application se comportera de manière identique alors qu'elle exécute des commandes de cyprès ou lorsque vous travaillez manuellement avec elle après la fin d'un test. "

Il n'y a rien d'explicite sur fixtures dans cette page, mais cela ressemble à son événement et fixtures sont aussi nettoyés. Thats le beforeEach() fonctionne dans le premier test (vérifiez l'état de la barre de boutons), car il fonctionne exactement après la before(). Pour le deuxième test, tout ce qui a été réglé dans le crochet before est parti et maintenant le beforeEach() tente d'obtenir des luminaires jamais définis.

J'espère que ça aide.

Une suggestion votre probablement maintenant: - est une bonne pratique pour faire votre connexion en tant que commande personnalisée glissant sur l'interface utilisateur, en utilisant uniquement la demande. (- https://docs.cypress.io/api/cress-api/custom -Commands.html # commande personnalisé-login )

2
Carlos Alfredo

J'ai rencontré un problème presque comme le vôtre avec avant.

before() fonctionne avant le prochain bloc de code.

describe("Some test", function() {
    before(function() {
        //something ...
        cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
    })

    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser doesn't exist here
    it("Should bar", function() {
    })
})

J'ai corrigé mon problème en déplaçant la sortie before() Déclaration de la portée de la décrire.

before(function() {
    //something ...
    cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
})

describe("Some test", function() {     
    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser also exists here
    it("Should bar", function() {
    })
})

J'espère que cela peut vous aider à résoudre votre problème.

0
JDTheOne