Cypress and TypeScript - Bringing in a new class

Question

Cypress and TypeScript - Bringing in a new class

I am currently utilizing Cypress.io alongside TypeScript for test automation and attempting to perform simple tasks. I want to import a class from one file to another without repeating the code.

p.s. Despite trying several solutions on Stack Overflow, none of them have been successful for me.

Files: File System

Code:

loginPage.ts

export class LogIn {
    //Launch app: http://localhost:6400/
    cy.visit('localhost:6400')
    //Press on menu item.
    cy.get('.navbar-burger').click()
    //Press "Client" menu item near "Login As:".
    cy.get('#navbarMenu a').contains("Client").click()
    //TODO
    }

and client_NewJob.ts

import { LogIn } from '../helpers/loginPage';
import * as ChaiString from 'chai-string';

chai.use(ChaiString);
const lg = new LogIn();
//beforeEach
describe('BeforeEachTestLogIn', () =>{
    beforeEach(() =>{
        lg.LogIn()
    })
})
//Test
describe('New job page', function() {
    it('newJobCreation', function() {
        //TODO
    })
})

When I try to execute the client_NewJob.ts script via Cypress, I encounter an error message:

./cypress/helpers/loginPage.ts | TS1005: ';' expected.

./cypress/helpers/loginPage.ts TS1003: Identifier expected.

./cypress/helpers/loginPage.ts TS1144: '{' or ';' expected

I keep receiving similar error messages... How can I resolve this issue with importing the class?

typescript automation automated-tests cypress

Answer 1

Answer №1

It appears that one aspect needing attention is the structure of your LogIn class, as the functionality should be contained within a method instead of directly in the class body:

export class LogIn {
    logIn() {
        //Open application: http://localhost:6400/
        cy.visit('localhost:6400')
        //Click on the menu button.
        cy.get('.navbar-burger').click()
        //Select the "Client" option from the navigation menu.
        cy.get('#navbarMenu a').contains("Client").click()
        //TODO
    }
}

Answer 2

It appears that one aspect needing attention is the structure of your LogIn class, as the functionality should be contained within a method instead of directly in the class body:

export class LogIn {
    logIn() {
        //Open application: http://localhost:6400/
        cy.visit('localhost:6400')
        //Click on the menu button.
        cy.get('.navbar-burger').click()
        //Select the "Client" option from the navigation menu.
        cy.get('#navbarMenu a').contains("Client").click()
        //TODO
    }
}

Cypress and TypeScript - Bringing in a new class

Answer №1

Similar questions

Sort and incorporate elements by multiple strings present in an array

Having trouble interacting with an element using Selenium in Python

Is it acceptable to access elements beyond the confines of a page object?

Depicting a potential value within Typescript

How can you customize the appearance of the filledInput component within a TextField component in Material UI?

Creating a flexible TypeScript function handler that accepts optional arguments depending on the function's name

RxJS: Observable.never() acts like an eternal subscription

The property 'x' cannot be found on the data type 'true | Point'

When `console.log(enum)` is executed in Typescript and AngularJS, the result will be `undefined`

Arrange an array of objects by making a nested API call in Angular

Sending the id from a component to a service in Angular

Attempting to engage with the like button on a Facebook page through Python's Selenium seems to be problematic

I thought enabling CORS would solve the issue, but it seems like the restrictions

Ways to bring in a Typescript Vue project to a Javascript Vue

Typescript headaches: Conflicting property types with restrictions

Custom hooks for Typescript and Javascript

Is the input URL modified by the Angular HttpClientModule's GET request?

What could be causing the QullJS delta to display in a nonsensical sequence?

Having trouble resolving rxjs/operators when using ngx-datatable?

Component unit testing in Angular 2/4 fails to register click events causing a lack of change detection