Extending Cypress.config with own properties using Typescript

Question

I'm trying to extend Cypress config adding my own property in this way:

Cypress.Commands.overwrite('getUser', (originalFn: any) => {
    const overwriteOptions = {
        accountPath: `accounts/${options.accountPath}`,
    };

    return originalFn(overwriteOptions).then(response =>
        Cypress.config({
            authUserString: generateAuthUserString(response.email, response.password),
        })
    );
});

but I get this error:

No overload matches this call.
  Overload 1 of 4, '(key: "url" | "browser" | "autoOpen" | "browserUrl" | "clientRoute" | "cypressEnv" | "isNewProject" | "isTextTerminal" | "morgan" | "parentTestsFolder" | "parentTestsFolderDisplay" | ... 84 more ... | "cypressBinaryRoot"): string | ... 16 more ... | { ...; }', gave the following error.
    Argument of type '{ authUserString: any; }' is not assignable to parameter of type '"url" | "browser" | "autoOpen" | "browserUrl" | "clientRoute" | "cypressEnv" | "isNewProject" | "isTextTerminal" | "morgan" | "parentTestsFolder" | "parentTestsFolderDisplay" | ... 84 more ... | "cypressBinaryRoot"'.
  Overload 2 of 4, '(Object: TestConfigOverrides): void', gave the following error.
    Argument of type '{ authUserString: any; }' is not assignable to parameter of type 'TestConfigOverrides'.
      Object literal may only specify known properties, and 'authUserString' does not exist in type 'TestConfigOverrides'.ts(2769)

How can I add my own properties to the Cypress config? I am using Typescript.

Where is `cy.getUser()` coming from? Is there a package that adds this? AFAIK, base Cypress does not contain this function — agoff, May 11 '23 at 13:23

score 4 · Answer 1 · answered May 11 '23 at 20:56

You don't really need to use Cypress.config() for this, you should instead use Cypress.env() which is freely extendable.

Adding items to config during the test has no effect, since none of the internal Cypress code knows about your custom property.

Therefore, you must be aiming to use it explicitly in your tests, for which Cypress.env() is the best choice.

The other problem is that Cypress.config({...}) would completely replace all existing config, even if it worked.

The correct syntax is to specify a key and value: Cypress.config('key', value).

Same applies to Cypress.env('key', value)

Cypress.Commands.overwrite('getUser', (originalFn: any) => {
  const overwriteOptions = {
    accountPath: `accounts/${options.accountPath}`,
  };

  return originalFn(overwriteOptions).then(response =>
    Cypress.env('authUserString', generateAuthUserString(response.email, response.password))
    })
  );
})

it('uses authUser value', () => {
  cy.getUser({accountPath: 'admin'})
    .then(() => {
      expect(Cypress.env('authUserString')).to.eq('authorised')
    })
})

Extending Cypress.config with own properties using Typescript

1 Answers1