I’m starting to work with Cypress and programming in general. I’m working on a very simple personal project executing TCs in a webpage.
I have this piece of code in ‘registrationPage.js’
/// <reference types="cypress" />
import registrationData from '../fixtures/registrationData.json'
import AccountInfoPage from './accountInfoPage'
class RegistrationPage{
//Fill out Registration form with valid credentials
fillRegistrationForm(){
const validUser = registrationData.validData.user1
const firstname = Cypress.env('firstname') || 'DefaultFirstName'
const lastname = Cypress.env('lastname') || 'DefaultLastName'
const email = Cypress.env('email') || '[email protected]'
const password = Cypress.env('password') || 'DefaultPassword123'
const passConfirm = Cypress.env('passConfirm') || 'DefaultPassword123'
cy.get('[title="First Name"]').type(firstname)
cy.get('#lastname').type(lastname)
cy.get('[autocomplete="email"]').type(email)
cy.get('#password').type(password)
cy.get('#password-confirmation').type(passConfirm)
}
Since this is a logic that I wan to re-use (only the part of getting the data, not typing it) I thought it would be a good option to have it in ‘commands.js’ file as a Command.
I have a data set located in registrationData.json but I also wanted to use environment variables in case I want to quickly override what the data set has (I would also like to hear if there is better options to handle this)
I put the logic into commands.js:
import registrationData from '../fixtures/registrationData.json'
import loginData from '../fixtures/loginData.json'
Cypress.Commands.add('getRegistrationData', function(){
const getUserData = () => {
const validUser = registrationData.validData.user1
return {
firstname: Cypress.env('firstname') || validUser.firstname,
lastname: Cypress.env('lastname') || validUser.lastname,
email: Cypress.env('email') || validUser.email,
password: Cypress.env('password') || validUser.password,
passConfirm: Cypress.env('passConfirm') || validUser.passConfirm
}
}
})
But when I try to make use of it in registration.spec.js in this way:
import RegistrationPage from "../page-objects/registrationPage"
import LoginPage from "../page-objects/loginPage"
describe('Registration page scenario mapping', () => {
it.only('Executes a sucessfull registration in the form', () => {
const registrationPage = new RegistrationPage()
cy.visit('customer/account/create')
registrationPage.fillRegistrationForm()
registrationPage.submitRegistrationForm()
registrationPage.verifyRegistration()
})
it('login', function(){
const loginPage = new LoginPage()
cy.visit('/')
cy.contains('a', 'Sign In').should('be.visible').click()
cy.contains('h1', 'Customer Login').should('be.visible')
loginPage.fillLoginForm()
})
})
It gives me an error in registrationPage.js saying that the values withing the .type() are undefined.
I tried with validUser.firstname instead but same error and if I use just ‘validUser’ as value it says that is an object and you can’t type that. I don’t understand why if I put validUser.firstname doesn’t recognize the value.
Sorry if I made the question in the wrongway or something, I hope someone can help me out. Thanks