Cypress tests do not visit intended URL because of wrong URL syntax

[farhin23]

Bug Report

Describe the Bug

In spec.cy.js file the cypress tests aims to visit two URLs - consumerUrl and providerUrl. These two URLs are configured in cypress.config.ts file as,

...
e2e: {
    baseUrl: 'http://localhost:18080',
    ...
  },
  env: {
    consumerUrl: 'http//localhost:18080',
    providerUrl: 'http//localhost:28080',
  },
...

The consumerUrl and providerUrl do not conform to the syntax of a generic URI. According to the generic syntax the scheme name is followed by a colon (:). This is missing in both of these two URLs, as there is no following colon (:) after http.

This configuration file cypress.config.ts, also defines a baseUrl. This baseUrl is used as prefix for every cy.visit() command's URL. If we want to visit a different host than the baseUrl, then we have to provide a fully qualified URL of the path we want to visit.

As the two URLs - consumerUrl and providerUrl, divert from the generic syntax, cypress can not recognize them as fully qualified URLs. Therefore, at the time of execution it appends these two URLs with the baseUrl, and ends up visiting the paths: http://localhost:18080/http//localhost:18080 and http://localhost:18080/http//localhost:28080

Expected Behavior

The cy.visit(consumerUrl) and cy.visit(providerUrl) commands should visit the URLs 'http://localhost:18080' and 'http://localhost:28080' correspondingly.

Observed Behavior

cy.visit(consumerUrl) and cy.visit(providerUrl) commands try to visit the paths: http://localhost:18080/http//localhost:18080 and http://localhost:18080/http//localhost:28080 correspondingly. Although these paths do not exist, cypress redirects them to the host path(the baseUrl), and thus the cy.visit() tests pass.

Although both of these tests pass, it is not testing what we wanted to. For example, in the second test, we intend to visit the providerUrl:http//localhost:28080, but the test redirects it to the baseUrl:http//localhost:18080 which is basically the consumerUrl. And ends up executing the rest of the tests on consumer data-dashboard.

  it('should create an asset and view it on provider side', function() {
    cy.visit(providerUrl);
    ....
  });

After the redirect occurs, the dashboard can not load the introduction page. However, it can load the menu bar and therefore the second test also pass.

Steps to Reproduce

Steps to reproduce the behavior:

1. clone the DataDashboard project from https://github.com/eclipse-edc/DataDashboard/tree/main

2. from the root folder, run npm install

3. run docker compose up. This will make consumer data-dashboard available at http://localhost:18080 and provider data-dashboard available at http://localhost:28080

4. run npx cypress open to open the cypress test runner. (We assume that cypress is already installed)

5. On test runner, click on 'E2E Testing' -> 'Start E2E Testing in Electron' -> 'spec.cy.js'

6. See that at the beginning of the test execution the navigation bar conatins the URL http://localhost:18080/http//localhost:18080 when running cy.visit(consumerUrl) and then http://localhost:18080/http//localhost:28080 when running cy.visit(providerUrl).

Both of them are then redirected to http://localhost:18080

7. Right click on the dashboard and select Inspect Element. In the Network tab see the Requested URL.

8. In the Console tab, see the Error: NG04002:... noMatchError. This is thrown when it can not match any routes.

Context Information

• Cypress version: 13.8.1
• Node version: v18.20.2

Possible Implementation

Update the consumer and provider URLs in cypress.config.ts file with right syntax, and adjust any changes in the spec.cy.js file.