Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

184
Visualizações
How to call a method in another module JavaScript?

I have a class with method performing login

LoginPage.js

class loginPage {
  fillCredentials(username, password) {
    cy.get('[id=username]').type(username);
    cy.get('[id=password]').type(password);
    return this;
  }

  clickLogin() {
    cy.contains("Login").click();
  }
}
export default loginPage;

I have another spec file for testing:

login.spec.js

import {fillCredentials,clickLogin} from '../../support/PageObjects/loginPage'

describe('User Onboarding Emails', () => {
  it('Verification email', () => {
    cy.visit('/')
    fillCredentials('username','password')
    clickLogin()
  });
});

However, it is giving an error of

(0 , _loginPage.fillCredentials) is not a function

I know its a wrong way of calling a method. Is there any way I can use the methods without creating an instance of class to access methods

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

You can do so if you make the methods static

class loginPage {

  static fillCredentials(username, password) {
    cy.get('[id=username]').type(username);
    cy.get('[id=password]').type(password);
    //return this;  // you can't return "this" because there is no this for static methods
  }

  static clickLogin() {
    cy.contains("Login").click();
  }
}
export default loginPage;
import {fillCredentials,clickLogin} from '../../support/PageObjects/loginPage'

describe('User Onboarding Emails', () => {
  it('Verification email', () => {
    cy.visit('/')
    fillCredentials('username','password')
    clickLogin()
  });
});

With static methods you lose this which refers to the class instance, and therefore lose the ability to chain methods,

import {fillCredentials,clickLogin} from '../../support/PageObjects/loginPage'

describe('User Onboarding Emails', () => {
  it('Verification email', () => {
    cy.visit('/')
    fillCredentials('username','password').clickLogin()  // can't do this with static
  });
});

As functions instead of a class, this is the pattern

// LoginPage.js

export const fillCredentials = (username, password) => {
  cy.get('[id=username]').type(username);
  cy.get('[id=password]').type(password);
  return this;
}

export const clickLogin = () => {
  cy.contains("Login").click();
}
// login.spec (same as you have above)

import { fillCredentials, clickLogin } from '../../support/PageObjects/loginPage'

describe('User Onboarding Emails', () => {
  it('Verification email', () => {
    cy.visit('/')
    fillCredentials('username','password')
    clickLogin()
  });
})

Be wary of encapsulating test code in page objects, it can lead to over-complicated code.

For example, if you now want to test what happens if password is not entered, you can't use fillCredentials because you can't omit the password parameter. So do you add a fillCredentialsWithoutPassword function? Do you modify fillCredentials to test if password is undefined?

about 4 years ago · Juan Pablo Isaza Relatório

0

So, what's going on is that you are mixing up the module structure with is defined by Closures with the class-instance pattern.

For this scenario (which is class-instance) the functions are NOT part of the object itself, but of it's PROTOTYPE.

So in order to get that function you should access it's prototype.

//create a class (class syntax and this one is pretty much the same)
function xx (){}
//this is what class syntax makes to create a method for the class
xx.prototype.theFunctionIwant = function (){}

//create an instance
var example = new xx()

//this is how you can spy that function in the test
xx.prototype.theFunctionIwant
//ƒ (){}

Try it out : )

about 4 years ago · Juan Pablo Isaza Relatório

0

The other answers given will work and solve your exact question, but I fear that making the functions static is an anti-pattern for the Page Object Model. Check out this article on how to set up a POM for Cypress. I would highly encourage you to instantiate the class, similar to below.

//LoginPage.js
export class LoginPage { ... }

//login.spec.js
import { LoginPage } from '../../support/PageObjects/loginPage';

describe('User Onboarding Emails', () => {
  it('Verification email', () => {
    const loginPage = new LoginPage()
    cy.visit('/')
    loginPage.fillCredentials('username','password')
    loginPage.clickLogin()
  });
});

You could also use a beforeEach() block to instantiate the variable before each test.

describe('User Onboarding Emails', () => {
  let loginPage: LoginPage;
  beforeEach(() => {
    loginPage = new LoginPage();
  });
  it('Verification email', () => {
    ...
  });
})

As an aside, it is usually preferred to name classes beginning with an uppercase (LoginPage vs. loginPage). When naming a class this way, you can easily differentiate the class vs. the instantiated variable.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda