Failed to locate element using locator in protractor test while using page object method

index.e2e.spec.ts

import { browser } from 'protractor';
import { Homepage } from '../pageobjects/Homepage'
const BASE_URL = 'http://localhost:3000';

describe('Homepage', () => {

  let homepage: Homepage;

  beforeEach(() => {
    browser.get(BASE_URL).then(function() {
      homepage = new Homepage();
    });
  });

  it('should display welcome message', () => {
    browser.sleep(5000);
    console.log('after first sleep');
    homepage.message.getText().then(function(text: any) {
      browser.sleep(5000);
      console.log('message: ' + text);
    });
  });
});

homepage.ts

import { $ } from 'protractor';
export class Homepage {

  public message: any;

  constructor() {
    console.log('constructor');
    this.message = $('#message');
  }
}

homepage.component.html

<h1 id="message">Welcome to our website!</h1>

Output:

[15:13:03] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
Started
constructor
after first sleep
F

Failures:
1) Homepage should display welcome message
  Message:
    Failed: No element found using locator: By(css selector, #message)
  Stack:
    NoSuchElementError: No element found using locator: By(css selector, #message)

Answer №1

When utilizing the convenient $ symbol for element access, ensure to use a css selector for accessing it. Your locator should look like this:

import { $ } from 'protractor';
export class App {

   public name: any;

   constructor() {
     console.log('constructor');
     this.name = $('h1#name');
   }
  }

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

Unusual occurrence in Angular 2: The root element's style properties are coming back as empty strings

Currently, I am exploring Angular2 and have reached a point where I want to implement dynamic style extension in Angular2 components. To clarify things further, here is some code: Main.ts import {bootstrap} from 'angular2/platform/browser'; ...

Can variable values be utilized as a union type within Typescript?

I'm attempting to achieve a setup similar to the following example using Typescript: const fruitApple:string = 'Apple'; const fruitOrange:string = 'Orange'; export type FruitOptions = fruitApple | fruitOrange //the compiler doe ...

The protractor tool is unable to recognize an Angular component when it is displayed on the page

I have implemented end-to-end (e2e) testing on my project, but I am facing issues that are causing my tests to fail. Below is a snippet of my app.po.ts file: import { browser, by, element } from 'protractor'; export class AppPage { public b ...

Typescript's confidential variables

Currently, I am delving into the world of Angular2 and familiarizing myself with working with classes in javascript for the first time. I'm curious about the significance of using the private parameter in the constructor, as opposed to simply writing ...

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

Many developers rely on the commander npm package for command-line parsing. I am considering using it as well due to its advanced functionality, such as commands, help, and option flags. For my initial program version, I only require commander to parse ar ...

What would be the optimal type for the second argument of the `simulate` method?

When using the simulate function, I am familiar with code like this: simulate("change", { target: { value: '7' } }); However, if my onChange function requires an object as a parameter, what should I pass in the second argument? interface myObj ...

Having trouble importing moment-range into your Angular 4.x application using ES6? Getting an error about incompatible call signatures?

In my Angular 4.x application, I encountered an issue while trying to import the moment-range package. The official documentation suggests using the following code: import Moment from 'moment'; import { extendMoment } from 'moment-range&apo ...

guide on transferring csv information to mongoDB using Angular and Node.js

I have a CSV file that contains data which I need to transfer into MongoDB using Angular and Node.js. Seeking assistance with reading the data from the CSV file using Angular, parsing it, and storing it in MongoDB. import { Injectable } from '@ang ...

Using TypeScript to structure and organize data in order to reduce the amount of overly complex code blocks

Within my TypeScript module, I have multiple array structures each intended to store distinct data sets. var monthlySheetP = [ ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', &apo ...

formik connects props that are lacking certain properties

Trying to figure out a way to simplify the process of declaring all the properties of formik in my Props when using connect(). The error message I keep encountering is: Type '{ entry: Entry; }' is missing the following properties from type &apos ...

Generating an Observable that connects with a pre-existing function

Currently, I've been attempting to connect the onCompleteItem array function from the ng2-file-upload package with an RxJS Observable method that can be subscribed to. The function in question looks like this: onCompleteItem(item: FileItem, response ...

Retrieve the value of the object within the mysterious index loop in JavaScript

I have retrieved search results from the data, and each time the index of my search result varies. At one point, the result may appear in the 4th index, while at another time it might be in the 100th index. How can I retrieve the rank value from within t ...

How can you merge arrays in Angular based on their unique names?

Is there a way to combine objects within the same array in Angular based on their names? [{ "name":"Navin", "id":"1" }, { "name":"Navin", "mark1":"98" ...

Certain sections within a Formik form are failing to update as intended

I have successfully implemented a custom TextField wrapper for Material-UI fields, but I am facing an issue with native Material UI fields not updating the form data upon submission. Below is the relevant code snippet along with a link to a code sandbox d ...

Error in React Typescript: Property is not defined on type when mapping through an array

Here is a snippet of code for a component I am working on: import type { NextPage } from "next"; export interface HomeInterface { data: object[]; id?: string; body?: string; title?: string; } const Home: NextPage<HomeItnerface> = ( ...

Creating Custom Return Types for Functions in Typescript Based on Input Parameters

Is there a technique to define the output type of a function based on its input? Here's an example to illustrate my question: function toEnum(...strings: string[]) { const enumObject = {}; strings.forEach((str) => { enumObject[str.toUpperC ...

Using Node.js to delete the .git file

Is there a way to remove a file using node.js? Looking at the folder structure below -> .git MachineFolder(non empty) READEME.md I attempted to delete the code snippet: - fs.readdir(dir, (err, files) => { if (err) throw err; Logger. ...

What is the most secure method to define options and retrieve their values in a type-safe manner?

I am currently utilizing a library that offers an interface with a great deal of flexibility. type Option = number | { x?: number; y?: number; z?: number; } interface Options { a?: Option; b?: Option; c?: Option; d?: Option; } function init ...

Issue: Undefined default value property in TypescriptDescription: In Typescript,

export class EntityVM implements EntityModel { ... Properties... ... constructor(newEntity: EntityModel, isCollapsed = false) { ... Properties... ... this.isCollapsed = isCollapsed; } } public myFunction(myEntity: EntityVM) { / ...

"Resetting the React state within a React context is causing a re

I'm experiencing an issue where the state in my React context keeps resetting on every render. I was under the impression that this should not happen with React context and global states. Unfortunately, I am unsure of how to resolve this. Whenever I ...