Angular E2E acces environment variables

Question

So I'm using NX with Angular and I have multiple apps with two possible authentification methods. Therefore I need to have a E2E test, that tests both authentification methods, because they differ in input fields. So this would be my attempt but I don't know how i should import the environment variables:

describe('Login Page', () => {
  it('Login should succeed', () => {
    if (environment.authType === 'password') {
      [...]
    } else if (environment.authType === 'oauth') {
      [...]
  });
});

In my app I use dependency injection to access the environments, would it be possible to access them?:

import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [
    { provide: 'environment', useValue: environment}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

score 1 · Accepted Answer · answered Oct 19 '21 at 08:38

Switch to Cypress for e2e testing, Nx supports it for new builds (not sure about retro-fitting).

Cypress has really easy and flexible config options, see docs for Configuration and Environment

For example, just add this to cypress.json config file

{
  "env": {
    "authtype": "password",
    "login_url": "/login",
    "username": "...",
    "password": "..."
  }
}

and the test

describe('Login Page', () => {
  it('Login should succeed', () => {
    if (Cypress.env('authType') === 'password') {
      [...]
    } else if (Cypress.env('authType') === 'oauth') {
      [...]
  })
})

Angular E2E acces environment variables

1 Answers1