How to use the autoLogin() plugin with TypeScript testing

What are you trying to achieve?

I’m trying to use the autoLogin plugin within a TypeScript test suite. I copied the examples from the documentation, but it doesn’t seem to be working. Perhaps some TS incompatibility?

What do you get instead?

The testing fails immediately, because function login() is undefined.

Provide console output if related. Use --verbose mode for more details.

TSError: ⨯ Unable to compile TypeScript:oad:flatten Completed in 3ms
../../../../../../test-project/tests/e2e/tests/configuration/configuration_test.ts:6:2 - error TS2349: This expression is not callable.  
  Type 'SupportObject' has no call signatures.

6  login('user'); // login using user session
   ~~~~~

    at createTSError (test-project\tests\e2e\node_modules\ts-node\src\index.ts:750:12)
    at reportTSError (test-project\tests\e2e\node_modules\ts-node\src\index.ts:754:19)
    at getOutput (test-project\tests\e2e\node_modules\ts-node\src\index.ts:941:36)
    at Object.compile (test-project\tests\e2e\node_modules\ts-node\src\index.ts:1243:30)
    at Module.m._compile (test-project\tests\e2e\node_modules\ts-node\src\index.ts:1370:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.require.extensions.<computed> [as .ts] (test-project\tests\e2e\node_modules\ts-node\src\index.ts:1374:12)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)

Provide test source code if related

// Copied from https://codecept.io/plugins/#autologin
Before(login => {
	login('admin'); // login using user session
});

Details

• CodeceptJS version: 3.1.3
• NodeJS Version: 7.19.1
• Operating System: Windows 10 or Ubuntu Linux
• Configuration file:

require('ts-node/register');
const { setHeadlessWhen } = require('@codeceptjs/configure');
const { bootstrap } = require('./presettings.ts');

// turn on headless mode when running with HEADLESS=true environment variable
// HEADLESS=true npx codecept run
setHeadlessWhen(process.env.HEADLESS);

exports.config = {
	name: 'E2E Testing',
	tests: [
		'./tests/configuration/**_test.ts',
	],
	output: './output',
	helpers: {
		Playwright: {
			url: 'https://test-site.local/',
			show: true,
			browser: 'chromium',
			// Keep cookies for all tests
			keepCookies: true,
		},
		ChaiWrapper : {
			"require": "codeceptjs-chai"
		}
	},
	bootstrap: null,
	mocha: {},
	plugins: {
		allure: {

		},
		autoLogin: {
			enabled: true,
			inject: 'login',
			users: {
				admin: {
					login: (I) => {
						I.amOnPage('/login.php');
						I.fillField('log', 'test_admin_user');
						I.fillField('pwd', 'test_admin_password');
						I.click('Submit');
					},
					check: (I) => {
						I.amOnPage('/dashboard');
						I.see('Dashboard');
					},
					fetch: () => {
						// Empty function
					},
					restore: () => {
						// Empty function
					},
				}
			}
		},
		pauseOnFail: {

		},
		retryFailedStep: {
			enabled: true
		},
		tryTo: {
			enabled: true
		},
		screenshotOnFail: {
			enabled: true
		}
	},
}

[callistino]

Did you rebuilt your definitions? You should now have an entry like this in your steps.d.ts file:

declare namespace CodeceptJS {
  interface SupportObject {
    I: I;
    current: any;
    loginAs: any;
...

[callistino]

I had to “manually” add this entry login: (role: string) => {}; into the steps.d.ts file since it wasn’t autogenerated by the npx codeceptjs def command which also means you’ll need to remember to do again every time you rerun your definitions. Another solution would be to get it from the container using const login = codeceptjs.container.support('login'); which doesn’t depend on remembering to add it to the definitions file.