Redirection on Login Times Out

[curt-mitch]

I'm running Cypress tests within an environment using Nx and Yarn. When I run tests for our login page they successfully pass on my machine but the test for a successful login always times out on the redirection and fails when running in a Github Action environment. Any suggestions you can offer are appreciated!

Workflow:

jobs:
  e2e-tests:
    runs-on: ubuntu-latest

    steps:
      - name: Check out source code
        uses: actions/checkout@v3

      - name: Set Node.js 16.x
        uses: actions/setup-node@v3
        with:
          node-version: 16.x

      - name: Install node dependencies
        run: yarn install

      - name: Cypress run tests
        uses: cypress-io/github-action@v5
        with:
          install: false
          config: baseUrl=http://localhost:4200
          config-file: apps/web-e2e/cypress.config.ts
          browser: chrome
          group: "UI - Chrome"
          command: yarn nx e2e web-e2e

Cypress.config.ts

import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';

const cypressJsonConfig = {
   fileServerFolder: '.',
   fixturesFolder: './src/fixtures',
   video: true,
   videosFolder: '../../dist/cypress/apps/web-e2e/videos',
   screenshotsFolder: '../../dist/cypress/apps/web-e2e/screenshots',
   chromeWebSecurity: false,
   specPattern: 'src/e2e/**/*.cy.{js,jsx,ts,tsx}',
   supportFile: 'src/support/e2e.ts',
   defaultCommandTimeout: 30000
};

export default defineConfig({
   e2e: {
      ...nxE2EPreset(__dirname),
      ...cypressJsonConfig,
   },
});

Nx workspace file:

...
     "web-e2e": {
         "$schema": "../../node_modules/nx/schemas/project-schema.json",
         "root": "apps/web-e2e",
         "sourceRoot": "apps/web-e2e/src",
         "projectType": "application",
         "architect": {
            "e2e": {
               "builder": "@nrwl/cypress:cypress",
               "options": {
                  "cypressConfig": "apps/web-e2e/cypress.config.ts",
                  "tsConfig": "apps/web-e2e/tsconfig.e2e.json",
                  "devServerTarget": "web:serve",
                  "testingType": "e2e"
               },
               "configurations": {
                  "production": {
                     "devServerTarget": "web:serve:production"
                  }
               }
            },
         },
         "tags": [],
         "implicitDependencies": [
            "web"
         ]
      },
...

test file:

import { UserInfoUtils } from '@congruence/e2e-shared';


const createAuthResponse = () => {
   const authResponse = {
      // ...
   };

   return JSON.stringify(authResponse);
};

context('Login Page', () => {
   beforeEach(() => {
      cy.visit('/');
   });

   it('should redirect from root to the login page', () => {
      cy.url().should('include', '/login');
   });

   it('should have the cursor focus on the username field when the page renders (so they can begin typing immediately)', () => {
      cy.focused().should('have.id', 'username');
   });

   describe('when trying to submit the login form', () => {
      it('should display err msg when no username or password entered', () => {
         cy.get('form').submit();

         cy.getEl('username-err').contains('Required');
         cy.getEl('password-err').contains('Required');
         cy.url().should('include', '/login');
      });

      it('should display err msg when bad username/password are entered', () => {
         cy.login('some-text', 'some-text');

         cy.getEl('login-err').should('be.visible');
         cy.url().should('include', '/login');
      });

      // this test always times out and fails
      it('redirects to user start page on success, and displays user name in header', () => {
         const userInfo = UserInfoUtils.getUserInfo('user');
         cy.intercept('POST', '/auth-server/token?grant_type=password', { body: createAuthResponse() }).as('loginSuccess');

         cy.login(userInfo.username, userInfo.password);

         cy.wait('@loginSuccess');
         cy.location('pathname', {timeout: 60000}).should('not.include', '/login');
         cy.getEl('topbar-avatar-name').contains(userInfo.username);
      });
   });
});

[MikeMcC399]

@curt-mitch

If you don't get any helpful response here, you might like to consider checking in to the very active Cypress Community on Discord.

[MikeMcC399]

@curt-mitch

I revisited this and noticed that you are using the command parameter, which overrides a whole lot of other parameters. That may be the reason for your problem.

See https://github.com/cypress-io/github-action/blob/master/README.md#custom-test-command

"Caution: using the action parameter command causes multiple other parameters to be ignored including: auto-cancel-after-failures, browser, ci-build-id, command-prefix, component, config, config-file, env, group, headed, parallel, project, publish-summary, quiet, record, spec and tag."

[chrisbreiding]

@curt-mitch Based off what Mike posted about using the command parameter, you may need to include those other, ignored parameters as command line arguments, like so:

yarn nx e2e web-e2e --config "baseUrl=http://localhost:4200/" --config-file="apps/web-e2e/cypress.config.ts" browser=chrome group="UI - Chrome"

Would you be able to try that?

[AtofStryker]

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.