Create a reusable function where signup process selects each option during user registration

user2744620 0
Viewed 48

I am trying to create reusable function for login scenario where the user is given an option to select the choice of their department to curate the content. Only one option can be selected per one registration. I have created a file for just the locators and using cypress to return the first indexed item. I am calling the test in the main spec. This login function has multiple options to choose from and I have added all the options in Json file in teamSelector.js. How do I make this teamSelector.js reusable fun? I don't want to specify the index in this file but call in my loginTest.js file with an ability to call all the available ID's from Json file.

loginTest.js file code below

import emailSignup from './emailsignup'
import teamSelector from './teamSelector'

{/* <reference types = "cypress" /> */}
const {commands} = require('../support/commands')

const { Input } = require("@angular/core")
const { wrap } = require("module")
const { isExportSpecifier } = require("typescript")



describe('our first suite', () => {

    const signup = new emailSignup()
    const signindepartment = new teamSelector()


    it('first test', () => {
        cy.visit('/')
        signup.signupforfreelink().click()
        // cy.get('a[data-tracking-name="Sign up for free"]').click()
        cy.get('.flex').should('contain',"Create your free account")
        cy.get('[for="emailSignup"]').should('contain',"Work email")
        signup.email()
        signup.continuebtn()
        signup.firstandlastname()
        signup.password()
        signup.signInButton()
        signup.alertsignup()
        signup.closealert()
        signindepartment.loginselectors()

})

})

teamSelector.js

class teamSelector {

loginselectors() { return cy.get('.flex').find('[type="checkbox"]').then(userselection => {

    // const department = {
    //         "mar": "Marketing",
    //         "prod": "Product & Design",
    //         "eng": "Engineering",
    //         "supp": "IT & Support",
    //         "oper": "Operations",
    //         "acctmgnt": "Sales & Account Mgmt.",
    //         "hr": "HR & Legal",
    //         "creative": "Creative Production",
    //         "customerservice": "Customer Service",
    //         "fin": "Finance",
    //         "manfact":"Manufacturing",
    //         "other": "Other / Personal"
    //      }

    cy.wrap(userselection)
    .first()
    .check({force:true})
    .should('be.checked')

})

}

}

export default teamSelector

cypress javascript
1 Answers

Probably best to pass the index into the method

signindepartment.loginselectors(2)

// or pass in the code

signindepartment.loginselectors('eng')

loginselectors(indexOrCode) {

  const departments = {
    "mar": "Marketing",             // index 0
    "prod": "Product & Design",     // index 1
    "eng": "Engineering",           // index 2
    ...
  }

  let dept;
  if (typeof indexOrCode === 'number') {
    dept = department[Object.keys(department)[indexOrCode]]
  } else {
    dept = departments[indexOrCode]
  }

  const deptSelector = `[value="${dept}"]`; // NOTE must use backticks
                                            // to insert dept into selector
  cy.get('[type="checkbox"]' + deptSelector]
    .check({force:true});                   // {force:true} if hidden
}

This presumes there's only one set of Department checkboxes on the page.

If you get an error saying "check failed because multiple element selected" then the presumption is wrong, and you need to look in the HTML for a unique parent selector to add before the .check().

Fody0
Related