DevExpress/angular-testcafe

No Angular Server is started with ng e2e

GregorBiswanger opened this issue · 4 comments

ng e2e gives me the following warning message at Angular in version 12.1.2:
"TestcafeBuilderOptions" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.

No Angular Server is started. You have to start ng serve separately. No advantage currently visible with this library.

An Angular Schematic for this library would be really very helpful.

Hi,
I was able to reproduce the issue. However, I'm not sure that this issue is the same as yours. I took the https://github.com/timnederhoff/angular-testcafe-example example and updated all angular references.
I got the following package.json file:

{
  "name": "angular-testcafe-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.3",
    "@angular/common": "~12.1.3",
    "@angular/compiler": "~12.1.3",
    "@angular/core": "~12.1.3",
    "@angular/forms": "~12.1.3",
    "@angular/platform-browser": "~12.1.3",
    "@angular/platform-browser-dynamic": "~12.1.3",
    "@angular/router": "~12.1.3",
    "rxjs": "~6.6.7",
    "tslib": "^1.10.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.1.3",
    "@angular/cli": "~12.1.3",
    "@angular/compiler-cli": "~12.1.3",
    "@angular/language-service": "~12.1.3",
    "@types/jasmine": "~3.3.8",
    "@types/node": "~8.9.4",
    "angular-testcafe": "2.0.6",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "testcafe": "^1.14.0",
    "testcafe-reporter-html": "^1.4.4",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.3",
    "typescript": "^4.3.5"
  }
}

I got the following warning/error message:

"TestcafeBuilderOptions" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
An unhandled exception occurred: The 'buildOptimizer' option cannot be used without 'aot'.
See "C:\Users\Alex\AppData\Local\Temp\ng-T1svsI\angular-errors.log" for further details.

The warning message is similar to yours, but I also have some other errors.
We would appreciate it if you create a sample that reproduces the issue in the same way as yours.

Hi,

here my steps (I use pnpm):

  • Create a new Angular Project: ng new AngularTestCafe --package-manager pnpm
  • Install Angular-TestCafe and TestCafe: pnpm install --save-dev angular-testcafe testcafe
  • I add this angular.json configuration:
{
  "projects": {
    "AngularTestCafe": {
      "architect": {
        "e2e": {
          "builder": "angular-testcafe:testcafe",
          "options": {
            "browsers": [
              "chrome"
            ],
            "src": [
              "e2e/*.e2e-spec.ts"
            ]
          }
        }
      }
    }
   }
}

  • I create a e2e-folder with my-first-test.e2e-spec.ts:
import { Selector } from 'testcafe';

fixture`My first Angular Test`
    .page`http://localhost:4200`;

test('Show welcome message', async testController => {
    const message = await Selector('body > app-root > div.content > div.card.highlight-card.card-small > span').innerText;
    testController.expect(message).eql('AngularTestCafe app is running!');
});
  • I started the tests with the command: ng e2e
  • TestCafe runs but no Angular Web-Server on localhost, I get the error message:
"TestcafeBuilderOptions" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
 Running tests in:
 - Chrome 92.0.4515.107 / Windows 10

 My first Angular Test
 × Show welcome message

   1) Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.

       > | Selector('body > app-root > div.content > div.card.highlight-card.card-small > span')

      Browser: Chrome 92.0.4515.107 / Windows 10

         2 |
         3 |fixture`My first Angular Test`
         4 |    .page`http://localhost:4200`;
         5 |
         6 |test('Show welcome message', async testController => {
       > 7 |    const message = await Selector('body > app-root > div.content > div.card.highlight-card.card-small >
      span').innerText;
         8 |    testController.expect(message).eql('AngularTestCafe app is running!');
         9 |});

         at <anonymous> (C:\Users\Gregor\Documents\Web-Projects\AngularTestCafe\e2e\my-first-test.e2e-spec.ts:7:112)
         at <anonymous> (C:\Users\Gregor\Documents\Web-Projects\AngularTestCafe\e2e\my-first-test.e2e-spec.ts:8:71)
         at __awaiter (C:\Users\Gregor\Documents\Web-Projects\AngularTestCafe\e2e\my-first-test.e2e-spec.ts:4:12)
         at <anonymous> (C:\Users\Gregor\Documents\Web-Projects\AngularTestCafe\e2e\my-first-test.e2e-spec.ts:6:53)


   2) Failed to load the page at "http://localhost:4200/".
      Increase the value of the "pageRequestTimeout" variable, enable the "retryTestPages" option, or use quarantine mode
      to perform additional attempts to execute this test.
      You can find troubleshooting information for this issue at
      "https://go.devexpress.com/TestCafe_FAQ_ARequestHasFailed.aspx".

      Error details:
      Failed to find a DNS-record for the resource at "http://localhost:4200/".

      Browser: Chrome 92.0.4515.107 / Windows 10



 1/1 failed (11s)

I publish my project on GitHub for you: https://github.com/GregorBiswanger/AngularTestCafe

I hope that helps.

Thank you for sharing the example. I was able to reproduce the issue. I confirm that the warning message appears and that the server does not start automatically.

@GregorBiswanger
I examined your project one more time and found that you missed the "devServerTarget" option under your "e2e" options.
Please modify your package.json as follows:

        "e2e": {
          "builder": "angular-testcafe:testcafe",
          "options": {
            "browsers": [
              "chrome"
            ],
            "src": [
              "e2e/*.e2e-spec.ts"
            ],
            "devServerTarget": "AngularTestCafe:serve:production"
          }
        }

As for the warning, we cannot modify the "id" field as this can lead to unexpected behavior in previous Angular versions.