From Initial Tests to CI/CD In Cypress

Install prettier

npm install prettier 

Create .prettierrc

{
	"semi": false,
	"useTabs": true,
	"tabWidth": 4,
	"singleQuote": true
}

For code formatting use this command:

npx prettier . -write

Install typescript

npm install typescript

Create tsconfig.json

{
	"compilerOptions": {
		"target": "es5",
		"lib": ["es5", "dom"],
		"types": ["cypress", "node"],
		"esModuleInterop": true // It is fixed error 'TypeError: (0 , cypress_esbuild_preprocessor_1.default) is not a function'
	},
	"include": ["**/*.ts", "cypress.config.js", "cypress/e2e/login.ts"]
}

Rename cypress.config.js to cypress.config.ts

import { defineConfig } from 'cypress'
import createBundler from '@bahmutov/cypress-esbuild-preprocessor'
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor'
import createEsbuildPlugin from '@badeball/cypress-cucumber-preprocessor/esbuild'

export default defineConfig({
	e2e: {
		specPattern: '**/*.ts',
		viewportWidth: 1920,
		viewportHeight: 1080,
		async setupNodeEvents(
			on: Cypress.PluginEvents,
			config: Cypress.PluginConfigOptions,
		): Promise<Cypress.PluginConfigOptions> {
			await addCucumberPreprocessorPlugin(on, config)
			on(
				'file:preprocessor',
				createBundler({
					plugins: [createEsbuildPlugin(config)],
				}),
			)
			return config
		},
	},
})

Rename login.js to login.ts

import BasePage from '../page-object/basePage'

const basePage = new BasePage()

describe('Login tests', () => {
	it('login', () => {
		basePage.open()
		basePage.login('[email protected]', 'Test1234')
	})
})

Rename registration.js to registration.ts

import RegisterPage from '../page-object/registerPage'

const registerPage = new RegisterPage()

describe('Registrations tests', () => {
	it.only('Registration', () => {
		registerPage.open()
		registerPage.register('[email protected]', 'Test1234')
	})

Create page-object folder