Error encountered when running protractor cucumber test: SyntaxError due to an unexpected token {

Embarking on the journey of setting up Protractor-Cucumber tests, I have established a basic setup following online tutorials shared by a kind Samaritan.

However, upon attempting to run the tests, I encountered an error - unexpected token for the imports. I am puzzled by this issue and would greatly appreciate any assistance.

For reference, the versions of node and other tools I am using are as follows:

C:\Users\A>npm --version
6.4.1

C:\Users\A>node --version
v10.15.1

C:\Users\A>protractor --version
Version 5.4.2

Here is a snippet from my feature file:

Feature: Go to the home
  Display the title

  Scenario: Home Page
    Given I am on the home page
    When I do nothing
    Then I should see the title

And here is a snippet from my steps definition file:

import { AppPage } from '../pages/app.po';
import { Before, Given, When, Then } from 'cucumber';
import { expect } from 'chai';

let page: AppPage;

Before(() => {
  page = new AppPage();
});

Given(/^I am on the home page$/, async () => {
  await page.navigateTo();
});

When(/^I do nothing$/, () => {});

Then(/^I should see the title$/, async () => {
  expect(await page.getTitleText()).to.equal('Welcome to angular-cli-cucumber-demo!');
});

Lastly, here is a snippet from my page objects file:

import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getTitleText() {
    return element(by.css('app-root h1')).getText();
  }
}

Upon attempting to run the tests using the command ng e2e, I encountered the following error:

DevTools listening on ws://127.0.0.1:56273/devtools/browser/7653bd59-c490-4ac0-a00e-0d3132dc5b11
[0417/123615.432:ERROR:broker_win.cc(137)] Error sending sync broker message: Error (0x5) while retrieving error. (0xE8)
[0417/123615.433:ERROR:command_buffer_proxy_impl.cc(92)] ContextResult::kFatalFailure: AllocateAndMapSharedMemory failed
[12:36:17] E/launcher - Error: C:\Users\A527629\Documents\workspace-vs-code\poc-serenity\e2e\src\steps\app.steps.ts:1
(function (exports, require, module, __filename, __dirname) { import { AppPage } from '../pages/app.po';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at supportCodePaths.forEach.codePath (C:\Users\A527629\Documents\workspace-vs-code\poc-serenity\node_modules\cucumber\lib\cli\index.js:142:42)
    at Array.forEach (<anonymous>)
    at Cli.getSupportCodeLibrary (C:\Users\A527629\Documents\workspace-vs-code\poc-serenity\node_modules\cucumber\lib\cli\index.js:142:22)
    at C:\Users\A527629\Documents\workspace-vs-code\poc-serenity\node_modules\cucumber\lib\cli\index.js:169:41
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\A527629\Documents\workspace-vs-code\poc-serenity\node_modules\cucumber\lib\cli\index.js:44:103)
[12:36:17] E/launcher - Process exited with error code 100
An unexpected error occurred: undefined

Answer №1

Include the following snippet in your protractor.conf.js file:

onPrepare() {
  require('ts-node').register({
    project: require('path').join(__dirname, './tsconfig.json')
  });
}

Answer №2

Consider eliminating

definitions for actions

import { Before, Given, When, Then } from 'cucumber';
import { expect } from 'chai';

as well as elements on the page

import { browser, by, element } from 'protractor';

These imports are usually taken care of by protractor automatically during initialization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the flow of data in the RxJS stream depending on a specific value within the stream

I developed a straightforward component featuring a single button that initiates and halts a sequence of numbers generated by RxJS timer. import { Component, OnInit } from '@angular/core'; import { BehaviorSubject, Observable, timer, merge } fro ...

The directive for accepting only numbers is not functioning in versions of Chrome 49.xx.xx and earlier

I have implemented a directive in Angular 6 to allow only numbers as input for certain fields. The directive code is shown below: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[NumbersOnly]& ...

The TypeOrm many-to-one relationship with a multiple column join is giving an error: The column mentioned in the reference, <column name>, was not found in the entity <entity name>

I have an entity called A with a composite primary key, and another entity called B that has foreign keys referencing both columns of entity A. I am currently attempting to establish a many-to-one relationship between entity B (many) and entity A (one). U ...

Using numerous maps within Ionic applications with the JavaScript SDK

Currently, I am utilizing the Google Maps (Javascript SDK) in Ionic V3 and have successfully created two pages with map views. Interestingly, while the first page displays the map correctly, upon opening the second page, the map shows up with grey lines, ...

Angular button for opening or closing the menu that redirects the page to a localhost URL

I have implemented a template from the link below into my project. So far, everything has been working fine, but recently I noticed that the menu open/close button is malfunctioning. Whenever I click on the close button while on any page (for example, http ...

Having trouble locating the .ts module when executing a Node script with experimental modules enabled

I am currently developing a node express project and I need to run a node script from the terminal. Within my project, there are some .ts files that I want to include in the script (MyScript.js). Below is the content of MyScript.js: import get from &apos ...

Multi-line D3 chart that dynamically updates and intersects with the axis

I am attempting to create a multiline d3 chart that can be updated with new datasets. I have developed a method to plot the new data on the existing d3 frame, but I am encountering issues when trying to update the chart with mocked data. The new data is no ...

Transform a list of time slots into a time interval using Angular (2/4/5/6)

Hello everyone! Just wanted to share my updated solution after considering your feedback. Thank you! getTime(apptTime) { const fields = apptTime.split("-"); const startingTime = this.formatTime(+fields[0]); const endingTime = this.formatTime(+fie ...

Tracking user session duration on a React Native app can be achieved by implementing a feature that monitors and

I'm currently focusing on tracking the amount of time a user spends on the app in minutes and hours, and displaying this information. I have successfully implemented the functionality to count minutes, but I am struggling to figure out how to track wh ...

How to calculate the sum of all values in a FormArray in Angular

I am trying to retrieve the input values from each row and then calculate the sum of these rows. Here is my HTML code: <ng-container formArrayName="cap_values"> <tbody *ngFor="let item of capValues.controls; let i=index" [formGroupName]="i"& ...

The importance of subscribing in service calls: Exploring Angular 2/4

As a newcomer to angular4, I am delving into the world of observables and subscriptions. export class MyComponent implements OnInit { private subscription: Subscription ngOnInit() { // situation-1 -> making service call 1 with subscri ...

Encountering an error with Angular-NG8001 due to an unknown element. Any suggestions on how

I am encountering an issue with my Angular project. The project structure I am working with can be found here: app structure. Within my app.module.ts file, the code appears as follows: import { NgModule } from '@angular/core'; import { BrowserMod ...

Why is it so difficult for the TypeScript compiler to recognize that my variables are not undefined?

Here is the code snippet in question: function test(a: number | undefined, b: number | undefined) { if (!a && !b) { console.log('Neither are present'); return; } if (!b && !!a) { console.log('b is not present, we ...

Angular function is executed ahead of the designated schedule

I am working with Angular components that execute two functions during initialization. The first function populates an array, and the second function takes values from that array and calls a service. The issue I am facing is that the second function execu ...

Filtering Angular routing history elements

If I have an application that relies on Router for navigation, is there a way to eliminate certain router history elements from the history? For example, is it possible to programmatically filter out all URLs containing 'xyz' like this: // Exampl ...

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

I'm currently working on my angular project and I've imported the ngx-editor. My goal is to reduce the height of the editor, but I'm facing some challenges. After inspecting the element, I was able to adjust the height successfully within th ...

Unable to activate parameter function until receiving "yes" confirmation from a confirmation service utilizing a Subject observable

Currently, I am working on unit tests for an Angular application using Jasmine and Karma. One of the unit tests involves opening a modal and removing an item from a tree node. Everything goes smoothly until the removeItem() function is called. This functi ...

Caution: The attribute name `data-*` is not recognized as valid

I am attempting to import an SVG file in my NEXT.js project using the babel-plugin-inline-react-svg. I have followed all the instructions and everything is functioning perfectly. // .babelrc { "presets": ["next/babel"], "plugin ...

Introducing a variety of services into the system

From my understanding, services must be provided and injected, meaning each service needs to be placed inside the constructor like this: constructor (private a: AService, private B: BService) {} In my scenario, I have multiple services that all follow th ...

The properties of Angular interface objects are not defined

Here is an example of an interface for an object: export interface IProduct { vendor?: string; price?: number, quantity?: number, savings?: number, productId?: number, vendorsPrice?: number[], title?: string, images?: objec ...