How to use the autoLogin() plugin with TypeScript testing

[daigo75]

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]

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.

[daigo75]

Thanks, I will give it a try. I'm not sure I understand the "get it from the container", though. Would you be so kind to give me an example of that? Thanks.

[callistino]

Thanks, I will give it a try. I'm not sure I understand the "get it from the container", though. Would you be so kind to give me an example of that? Thanks.

You just paste the line I mentioned above, wherever you want to use the login plugin:

Feature('Feature');

const login = codeceptjs.container.support('login');

Before(({ I }) => {
  login('admin');
});

Scenario('Scenario', ({ I }) => {
  ...
});

The plugin correctly adds the "login" function to the supportObject but the definitions implementation doesn't look at plugins to add to the definitions file, so it exists but not for TS. It only adds "includes" from the config file. It would have to be updated somehow to run plugins too so they'll get a chance to add services to the supportObject or similar.

[daigo75]

Thanks for the explanation. Now that I see it, it's quite obvious. The limitation of TS is that it can't see what's actually available unless it's explicitly declared. One could add a dozen plugins, methods and features, but without a .d.ts none of that would be visible. It makes sense.

Thanks for your help, much appreciated.

[mike-petersen]

If you generated the steps.d.ts with "npx codeceptjs def" you can extend the SupportObject in it

`
type dashboardPage = typeof import('./src/pages/dashboard');

interface SupportObject {
I: I,
current: any
login: any
dashboardPage: dashboardPage
}`

That way you can use the login in the steps and additionally if you want to use your page objects, they are also available and have the correct types. You could also add a typing for the login.

[callistino]

If you generated the steps.d.ts with "npx codeceptjs def" you can extend the SupportObject in it

` type dashboardPage = typeof import('./src/pages/dashboard');

interface SupportObject { I: I, current: any login: any dashboardPage: dashboardPage }`

That way you can use the login in the steps and additionally if you want to use your page objects, they are also available and have the correct types. You could also add a typing for the login.

The problem with adding to the steps.d.ts file as even I initially tried, is that you need to remember to do so after every definition change when adding pages, fragments or any other includes on the config, which means you can potentially forget to do so. Therefore, I currently only do the second solution I posted of getting any non automatically generated helpers from the codeceptjs.container.

[nicostubi]

login: (role: string) => {};

Hello @callistino I have tried to include this in my steps.d.ts, like this:

/// <reference types='codeceptjs' />

declare namespace CodeceptJS {
	interface SupportObject {
		I: I
		current: any
		login: (role: string) => {}
	}
	interface Methods extends Playwright, GraphQL, JSONResponse {}
	interface I extends WithTranslation<Methods> {}
	namespace Translation {
		interface Actions {}
	}
}

It does not work, I am getting this error in my test:

TSError: ⨯ Unable to compile TypeScript:
tests/e2e/3_add_recipe_test.ts:18:5 - error TS2304: Cannot find name 'login'.

When adding the following line in each of my test file, it is working like a charm:

const login = codeceptjs.container.support('login')

But of course, I would like to avoid adding this line at the top of each of my test file.

I understood adding the login declaration in steps.d.ts would be the alternative to adding in each test file. Is it correct?

If yes, would you have a working example or some guidance why it would not work for me ?

Best Regards,
Nicolas

[nicostubi]

login: any

Hello @mike-petersen I have tried this, as well, and I get the same results. I must be missing a piece of the solution.

/// <reference types='codeceptjs' />

declare namespace CodeceptJS {
	interface SupportObject {
		I: I
		current: any
		login: any
	}
	interface Methods extends Playwright, GraphQL, JSONResponse {}
	interface I extends WithTranslation<Methods> {}
	namespace Translation {
		interface Actions {}
	}
}

BR,
Nicolas

[callistino]

After this PR you shouldn't have to do either of the tricks above so I would encourage you to update codeceptjs versions.

[nicostubi]

I am using CodeceptJS 3.3.4 and I get the following error when removing the "const login" declaration:

TSError: ⨯ Unable to compile TypeScript:
tests/e2e/3_add_recipe_test.ts:18:5 - error TS2304: Cannot find name 'login'.

18     login('admin')
       ~~~~~

    at createTSError (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:859:12)
    at reportTSError (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:863:19)
    at getOutput (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:1077:36)
    at Object.compile (C:\Projects\[...]Frontend\node_modules\ts-node\src\index.ts:1433:41)
    at Module.m._compile (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:1617:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .ts] (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

[nicostubi]

I was using

Before(({ I }) => {
    login('admin')
 })

when using (as the original post by @daigo75):

 Before(login => {
	login('admin'); // login using user session
});

I get the same error than @daigo75

tests/e2e/3_add_recipe_test.ts:22:2 - error TS2349: This expression is not callable.
  Type 'SupportObject' has no call signatures.

22  login('admin'); // login using user session
    ~~~~~

    at createTSError (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:859:12)
    at reportTSError (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:863:19)
    at getOutput (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:1077:36)
    at Object.compile (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:1433:41)
    at Module.m._compile (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:1617:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .ts] (C:\Projects\[...]\Frontend\node_modules\ts-node\src\index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

[callistino]

You need to inject the login into wherever you are using it and with the name you passed to the inject key when configuring your autoLogin plugin. In my case I have this:

// autoLogin config
{
  enabled: true,
  saveToFile: true,
  inject: 'loginAs',
  users: {
    ...
  },
}

// autoLogin use
Before(async ({ I, loginAs, CustomersPageMobile }) => {
  await loginAs('admin');
  I.amOnPage(CustomersPageMobile.url);
});

[nicostubi]

Now getting:

TSError: ⨯ Unable to compile TypeScript:
tests/e2e/3_add_recipe_test.ts:18:17 - error TS2339: Property 'loginAs' does not exist on type 'SupportObject'.

// autoLogin config
autoLogin: {
			enabled: true,
			inject: 'loginAs',
			users: {
				admin: {
					login: async (I) => {
						...
					},
					check: (I) => {
						...
					},
					fetch: () => {},
					restore: () => {},
				},
				user: {
					...
				}
			}
		}

// autoLogin use
Before(async ({ loginAs }) => {
    await loginAs('admin')
  })