Setting up sleep and selecting elements by CSS using cucumber, protractor, and TypeScript

My goal is to be able to interact with a user-provided CSS string using protractor, cucumber, and typescript. However, the code I have written does not seem to be effective in this scenario.

While element(by.id(x)) works perfectly, element(by.css(x)) does not yield the desired result.

Below is an excerpt from Steps.ts:

import { Given, Then, When } from '
import {$, browser, by, element} from 'protractor';
import { FacebookPage } from '../../page_objects/pages/facebook/facebook.page';
import { expect } from '../support/expect';

let page:

Then(/^waiting for (.*) seconds$/, function (wait): number {
    browser.sleep(wait * 1000); //works fine but could you please provide a better solution?

});

Then(/^clicking on button with ID (.*)$/, async function     (idOfElement){
        await element(by.id(idOfElement)).click();
        return true; //works perfectly
});

Then(/^clicking on button with CSS selector (.*)$/, async function     (idOfElement){
    return await element(by.css(idOfElement,)).click() //doesnt work at all
});

If needed, I can share the cucumber code and my protractor configuration, though I don't believe it's necessary at this point.

Error message: NoSuchElementError: No element found using locator: By(css selector, href="/messages/t/")

Another error message encountered: InvalidSelectorError: invalid selector: An invalid or illegal selector was specified

I am certain that there is a text with href="/messages/t/" present on the page

Answer №1

To choose and click on an element by its HREF using protractor, follow these steps:

Then(/^I click on a button with CSS code (.*)$/, async function (href) {
    const anchor = await element(by.css(`[href="${href}"]`));
    await anchor.click();
});

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

Retrieve the imported object by referencing the environment

Within my TypeScript Node application, I am looking to access the exported object that corresponds to my NODE_ENV variable. config.ts const test: { [index: string]: any } = { param1: "x", param2: { name: "John" } } const dev: { [index ...

Encountering issues in transmitting form data to a Node server from Angular

In my Angular application, I am working on creating a registration page with validation. Once the user fills out the form and submits it, the data is sent to the server and saved in MongoDB. This is the approach I have taken: register_user() { const ...

A Step-by-Step Guide to Setting Up a Scoreboard for Your Rock Paper Scissors Game

I'm new to JavaScript and I want to create a rock, paper, scissors game from scratch. My Game Plan: Once the user clicks on an option (rock, paper, scissors), the game will display their score and the computer's score along with the result of t ...

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

https://i.stack.imgur.com/kEAKC.png https://i.stack.imgur.com/03tHg.png After examining the two images above, it appears that the CSS is not functioning properly when I try to append the same HTML code using JavaScript. Below is the snippet of my HTML co ...

Showing the overflow scroll bar on both iOS and Android mobile devices

Is it possible to make the overflow scrollbar visible on mobile devices, specifically iPhones, Samsungs, and Safari browsers? The scrollbar is currently visible on desktops but not on mobile devices. I need a solution for this issue. Here is the current c ...

Ways to increase the number of responses in an Express app after the initial response

In order to comply with the Facebook messenger API requirements, a 200 response must be sent immediately upon receiving the webhook request on my server, within 20 seconds. However, this process may take longer than the execution time of other middleware f ...

Utilizing PrimeNG's p-dataView feature without repetitive FieldSets

Currently, I am utilizing p-dataView and I'm interested in implementing p-fieldset based on the application type. My goal is to prevent the fieldset from being duplicated when multiple instances occur. The scenario below illustrates one such case; how ...

I'm really puzzled as to why they would choose to export in this manner in React

I noticed that several files were exported in a similar manner, and I'm unsure why this specific method was chosen. Could there be any advantages or particular reasons for exporting them like this? index.ts export { default } from './Something& ...

Is it necessary for vertex labels to be distinct within a graph?

I am currently developing a browser-based application that allows users to create graphs, manipulate them, and run algorithms on them. At the moment, each vertex is represented by a unique positive integer. However, I am considering implementing labeled ve ...

A collection of objects in TypeScript with a reference and the ability to add new objects using the

Recently, I've come across an issue in my code while working with custom objects and arrays of them. I have identified a scenario where the push() method works fine and another where it doesn't. Scenario 1 (working as expected): class MyObject{ ...

Having difficulty retrieving an angular file from a location outside of the asset folder

I'm encountering issues with a small project that is meant to read a log and present it in table format. Here is the outline of the project structure: project structure Within the LOG directory, I should be able to access motore.log from my DataServi ...

Creating a subclass of `Error` leads to the error message "only refers to a type, but is being used as a value here."

I currently have Typescript 4.0.2 installed. Within lib.es5.d.ts, there is the snippet provided below: interface Error { name: string; message: string; stack?: string; } interface ErrorConstructor { new(message?: string): Error; (messa ...

JavaScript in a copied style

When using JavaScript to copy a table cell, I encountered an issue where the style was not being copied along with the content. Attempting to directly assign the style from one cell to another did not work as expected. To ensure that the text-align proper ...

Extract TypeScript classes and interfaces from a consolidated file

I am seeking a way to consolidate the export of my classes, interfaces, and enums from multiple files into a single file. In JavaScript, I achieved this using the following method: module.exports = { Something = require("./src/something").default, ...

HTML - Custom styled <select> element

My goal is to fully customize the style of a component and hide the selector image. All graphical styles such as borders and shadows have been defined in a previous table. Now, I want to remove all styling from the selection menu, including the icon used t ...

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

Stop users from being able to copy text on their smartphones' internet browsers

I am currently working on creating a competitive typing speed challenge using JavaScript. Participants are required to type all the words they see from a div into a textarea. In order to prevent cheating, such as copying the words directly from the div, o ...

Exploring ways to retrieve the chosen value from a personalized dropdown menu in React?

I'm currently utilizing styled components along with typescript to retrieve the selected option value of a customized dropdown. However, I am encountering an issue where the value does not update as expected. Interestingly, when I remove the opacity f ...

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

Issue with customizing the appearance of the selected option in a dropdown menu

Is there a way to change the background color of each option in a select box when it is selected? Currently, when an option is clicked, it appears blue along with the selected text color. I have tried various selectors like :active, :focus, ::selection, [s ...