I have developed the following code on an index file
Cypress.Commands.add('component', (name) => {
let log = Cypress.log({
'displayName': 'component',
'name': name
});
cy
.window({ log: false })
.then($win => {
const component = name === 'root' ? $win.app : $win.app.$children.find(e => e.$vnode.tag.includes(name))
log.set({
consoleProps: () => {
return { component };
}
});
return component;
});
})
Test are working fine if i use cy.component inside the test (it) but that force me to use it call it lot of times since I have to call it for all test.
I would like to initialize the component only once on a beforeEach hook and then re-use it on each test.
How can I do that?
This is the code for the tests
onst { LoginPage } = require("../support/pages/pages")
const loginPage = new LoginPage()
const email = "fabryotranto@gmail.com"
const password = "12345"
describe('login feature', () => {
beforeEach('it opens the url', () => {
cy.visit("http://localhost:3000/")
cy.component('root')
.then(root => {
root.showLoginModule = true
})
})
it('register with valid credentials', () => {
cy.component('Login')
.then(login => {
login.logSignSwitch()
login.signupEmail = email
login.signupPassword = password
});
cy
loginPage.clickSignUpButton
cy.get(loginPage.loggedUser)
.should("contain.text", "Log out")
})
if a create another test (it) I would have to call cy.component('Login') again
Thank you all in advance
Is it a custom command? (You mention cy.component so I presume it is). If so, just add it to cypress/support/commands.js and you can call it from any test.
See Custom Commands
A great place to define or overwrite commands is in your cypress/support/commands.js file, since it is loaded before any test files are evaluated via an import statement in the supportFile.
If that's not what you are doing, please expand you code sample to show more context for this code.
In a beforEach() Cypress will wait for commands to complete before running the it() blocks.
So a variable can be used if tests are structured inside appropriate describe() blocks.
const { LoginPage } = require("../support/pages/pages")
const loginPage = new LoginPage()
const email = "fabryotranto@gmail.com"
const password = "12345"
beforeEach('this is common to both login and search features', () {
cy.visit("http://localhost:3000/")
cy.component('root').then(root => {
root.showLoginModule = true
})
})
describe('login feature', () => {
let login;
beforeEach('only runs for login feature', () => {
cy.component('Login').then(component => login = component)
})
it('register with valid credentials', () => {
login.logSignSwitch()
login.signupEmail = email
login.signupPassword = password
...
})
})
describe('search feature', () => {
let search;
beforeEach('only runs for search feature', () => {
cy.component('Search').then(component => search = component)
})
it('makes a search', () => {
search.look('search-string')
...
})
})
You could stash the component in an environment variable
const { LoginPage } = require("../support/pages/pages")
const loginPage = new LoginPage()
const email = "fabryotranto@gmail.com"
const password = "12345"
describe('login feature', () => {
beforeEach('it opens the url', () => {
cy.visit("http://localhost:3000/")
cy.component('root')
.then(root => {
root.showLoginModule = true
})
cy.component('Login').then(component => Cypress.env('component', component))
})
it('register with valid credentials', () => {
const login = Cypress.env('component')
login.logSignSwitch()
login.signupEmail = email
login.signupPassword = password
})