Creating end-to-end (e2e) tests with TypeScript using Protractor and Jasmine

How can I resolve the errors in my e2e.spec.ts file after changing it from e2e.spec.js?

After making the switch, I encountered issues such as Cannot find name 'browser'. I attempted to

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

but this resulted in compilation errors like:

node_modules/protractor/built/browser.d.ts(1,1): error TS1084: 
Invalid 'reference' directive syntax.

In my package.json (included main parts), I have dependencies and devDependencies listed along with a sample test suite:

{
  "scripts": {
    "lite": "lite-server",
    "tsc": "tsc",
    "typings": "typings",
    "pree2e": "npm run webdriver:update",
    "webdriver:update": "webdriver-manager update"
  },
  // list of dependencies and devDependencies here...
}

Here is an example of part of a test suite code:

// import {browser, element, by} from 'protractor';
describe('Test suite related with health tab', () => {
    beforeEach(function () {
        browser.get('');
    });
}

Answer №1

Ever since the release of Protractor 4.0.5, they have been utilizing TypeScript 2.0.x. Recently, I went through the process of upgrading my project to incorporate these changes, and it required some effort - for instance, typings are no longer necessary (although they can still be used). Simply import from protractor as needed. As a result of this update, I encountered an error during the build process. At that time, I was using Visual Studio 2015 Pro with a TypeScript 1.8.3 extension. Upon switching to TypeScript 2.0.3 (which aligns with my project's requirements), the build error disappeared.

If you're considering transitioning from typings to @types, the following resource may prove useful: TypeScript typings in NPM @types org packages

Answer №2

To resolve the issue, I updated my version of typescript to 2.0 or higher and downgraded protractor to version 3.3. After doing this, there was no need for me to include any additional imports in my e2e-spec.ts file.

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

Configuring global runtime variables in NextJS for server-side operations

Currently, I am utilizing the instrumentation.ts file in NextJS to retrieve configuration dynamically when the server starts up. My goal is to have this configuration accessible during runtime for all API routes and server-side components. What would be th ...

Exploring the Integration of JSONAPI Included with Angular Observables

Currently, I am in the process of learning how to extract Drupal 8 content into my Angular 7 application using jsonapi. This journey started after reading Preston So's enlightening book on Decoupled Drupal in Practice. However, the guide fell short of ...

Issue with SignalR client functionality following update to .NET Core 3.1版本

Upon updating our server-side code to asp.net core 3.1, we encountered an issue with the javascript client for signalr (@microsoft/signalr 3.1.0). The errors we are facing are: https://i.sstatic.net/ITZyK.png Here is the code snippet for the hub initial ...

There was an unhandled rejection error stating: "TypeError - Unable to access property 'push' as it is undefined"

I am encountering an issue while trying to create a function that returns all indexes of an array. I'm not sure what mistake I might be making, as I keep getting an error stating that push cannot be used due to an undefined value. Here's the cod ...

Using the Google Identity Services JavaScript SDK in conjunction with Vue and TypeScript: A comprehensive guide

I am currently working on authorizing Google APIs using the new Google Identity Services JavaScript SDK in my Vue / Quasar / TypeScript application. Following the guidelines provided here, I have included the Google 3P Authorization JavaScript Library in ...

The compatibility issue between Angular's ngModel and Value in input components

Encountering a challenge with the angular form. My objective is to create a form pre-filled with default values that can be edited. Upon validation, the form should submit the data to the MySQL database. Below is the component.html code: <form #adopt=& ...

Creating a data structure that filters out specific classes when returning an object

Consider the following scenario: class MyClass {} class MyOtherClass { something!: number; } type HasClasses = { foo: MyClass; bar: string; doo: MyClass; coo: {x: string;}; boo: MyOtherClass; }; type RemovedClasses = RemoveClassTypes& ...

Analyzing data sets and generating statistics in JSON format using Angular

Imagine having a JSON data set with columns for employee names, locations, and scores. For example: {"employees":[ { "firstName":"John", "lastName":"Doe", "Location":"1" , "score":"10"}, { "firstName":"Anna", "lastName":"Smith", "Location":"1", "score":"2 ...

What is the best way to incorporate master/detail components without relying on hierarchical routes?

I need to combine the following elements. An index page with the route /items (plural). This page should be scrollable. When clicking on individual items, I want to display a detail page with the route /item/:id (singular). The detail page should have a ...

Ensuring full enum coverage in TypeScript switch/case statements

I have 2 enums Color and Shape. The constant SHAPES_BY_COLOR connects shapes with different colors. In the future, I aim to execute specific actions depending on the selected color and shape using a switch/case statement. Is there a way for TypeScript to ...

When running npm test in Angular 12, an error message pops up saying "Failed to load color version"

After transitioning our application from angular 6 to 12, everything seemed fine as I was able to successfully run the application using 'npm start' and test its UI features. However, upon attempting to run my angular unit tests with 'npm ru ...

Eliminate JSON data that pertains to dates that are either in the past or future

I am working on integrating upcoming classes and past classes components into my application. I have successfully stored the schedule of classes and can retrieve them using backend services. However, I need to display only the upcoming classes in one compo ...

Navigating Through Angular Components

I have a layout with 3 components arranged like this: <app-header></app-header> <app-body></app-body> <app-footer></app-footer> However, I want to change the positioning of the footer and body as shown below: <app-he ...

Build an Angular application without relying on the Angular CLI tool

Hello there! I was wondering if anyone could provide me with some guidance (or direct me to useful articles) on starting an angular project 4 from the ground up, without relying on angular-cli? I am just starting out and eager to learn how to develop an ...

How to achieve tree-shaking in Angular 7 without compressing the code?

Can tree shaking be activated during ng build--prod without code minification? I am currently using angular-cli with angular.json for configuration and some have recommended using a custom webpack.config.js to achieve this. Others suggest adding the --op ...

issue occurring after inserting a new parameter

I encountered an issue with my test case after adding a new parameter tiger to the method swimming. Despite passing the new parameter tiger to my test case, it continues to break. Update: I am receiving an "undefined grid" error at this line. Any suggest ...

Enhance React component props for a styled component element using TypeScript

Looking to enhance the properties of a React component in TypeScript to include standard HTML button attributes along with specific React features such as ref. My research suggests that React.HTMLProps is the ideal type for this purpose (since React.HTMLA ...

What is the process for being directed to the identity server login within an Angular application?

Immediately redirecting users to the identity server upon accessing the application is my goal. Currently, there is a login button that directs users to the ID server with a click, but I want to eliminate this button and have the redirection occur automati ...

Using a Typescript enum as a parameter type can lead to accepting incorrect values

When working with TypeScript, I have defined an enum, and now I want to create a function that accepts a parameter whose value is one of the enum's values. However, TypeScript does not validate the value against the enum, allowing values outside of th ...

Angular Unordered Query Exploration

I'm currently working on implementing a search feature in my code where I want to filter elements of a list based on user input. The filtering works well if I search for the elements in a specific order. For example, if I search for 'red blue yel ...