cypress actions - initialize component beforeEach hook

Question

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

Fody · Answer 1 · 2022-06-17T02:10:45.107

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.

Eliminating the command call

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')
    ...
  })
})

I am sorry the code was not complete and the first line was missing. The intention for that method is to controll the vue components where the parent is win.app and then the patameter "name' takes the name of its children. Then I use those component to modify the state of the web before starting my test. I would like to initialize the components on the beforeEach hook so I do not need to call cy.components on each test. ``` — Fabrizio Otranto, Jun 17 '22 at 01:25
Ok, thanks for the info. If you don't call it in the test, how will it know what `name` is? — Fody, Jun 17 '22 at 01:38

score 0 · Answer 2 · answered Jun 17 '22 at 03:46

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

  })

cypress actions - initialize component beforeEach hook

2 Answers2

Eliminating the command call