I am having issues with sendKeys and click() functions in my code. I am unable to access the elements using Protractor's javascript

<input class="form-control validation-field ng-dirty ng-touched ng-invalid" placeholder="Password" type="password">

Despite using the element to retrieve it, I am unable to send keys and no error message is displayed. This issue persists in both Firefox and Google Chrome.

element.all(By.css('.form-control.validation-field.ng-dirty.ng-valid.ng-touched')).sendKeys('sample code');

The contents of my conf.js file are as follows:

// Sample configuration file.

exports.config = {
    directConnect: true,

    // Capabilities sent to the webdriver instance.
    capabilities: {
        'browserName': 'firefox'
    },

    // Recommended framework is Jasmine.
    framework: 'jasmine',

    // Spec patterns relative to current working directory when protractor is called.
    specs: ['example_spec.js'],

    // Options for Jasmine.
    jasmineNodeOpts: {
        defaultTimeoutInterval: 100000
    }
};

When attempting to use get(0) or get(1), an error is displayed stating that the CSS cannot be located. Why is this happening?

javascriptangularjsprotractorautomated-tests

Answer №1

Your CSS code needs to be adjusted; consider using .ng-invalid instead of .ng-valid.

element.all(By.css('.form-control.validation-field.ng-dirty.ng-invalid.ng-touched')).sendKeys('example code');

Answer №2

Avoid relying on class names as they may be subject to change in the upcoming future.

For instance, if you need to enter a user's name, look for the node that displays visible text such as "user name" or something similar.

Locate that specific node and then find the input element that follows it.

For example:

//*[contains(text(),"User Name")]/following-sibling::input

Answer №3

Before attempting my recommendations, please refer to the response provided by Sanja Paskova.

I have identified a few potential issues in this scenario:

1) It appears that you are utilizing By.css() with an uppercase B, when it should be by.css() with a lowercase b. The discrepancy may affect the functionality.

2) Note that element.all() returns an ElementArrayFinder and not an ElementFinder. To address this, you can either use 

element.all(by.css('foo')).first().sendKeys('bla');
OR 
element(by.css('foo')).sendKeys('bla');
.

3) If points 1 and 2 do not resolve the issue, consider clicking on the input before sending keys:

var input = element(by.css('.form-control.validation-field.ng-dirty.ng-valid.ng-touched'));
input.click().then(function() {
    input.sendKeys('sample code');
});

These suggestions are based on possible solutions to the problem at hand.

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

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

My backend markdown compiler generates the HTML content, and I need Angular to retrieve data from the server, dynamically render the content, and display it. An example of the mock markdown content is: <h1 id="test1">Test 1<a href="#test1" title ...

javascripthtmlangulartypescriptanchor

Adding HTML content to routes in ExpressOrEnhancing routes

Recently, I've been working with a basic index.html file. My goal is to have the routes file append an HTML button when requested by the browser without actually modifying the original file. This may seem like a peculiar idea, but my intention is to c ...

javascriptnode.jsexpress

How can I execute a task following a callback function in node.js?

Is there a way to run console.log only after the callback function has finished executing? var convertFile = require('convert-file'); var source, options; source = 'Document.pdf'; options = '-f pdf -t txt -o ./Text.txt'; ca ...

javascriptnode.jscallback

Let's compare the usage of JavaScript's toUTCString() method with the concept of UTC date

When I fetch the expiry date time in UTC from the Authentication API along with a token, I use the npm jwt-decode package to extract the information. private setToken(value: string) { this._token = value; var decoded = jwt_decode(value); this._ ...

javascriptangularangular8

Issues encountered when updating values in MaterialUI's TextField using Formik

Within my React functional component, I utilize Formik for form management and MaterialUI V5.10 for styling. The form includes TextField elements and a Canvas element. I am encountering two issues... Despite setting initial values in Formik, the TextFiel ...

javascriptreactjsmaterial-uiformik

Is it possible to effortlessly update all fields in a mongoose document automatically?

Take for instance the scenario where I need to update a mongoose document in a put request. The code template typically looks like this: app.put('/update', async(req,res) => { try{ const product = await Product.findById(req.body.id) ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to transfer JavaScript if conditions to an external file?

I am currently working on a script to transfer data between various software applications. Within this script, there is an if condition set up to ignore specific fields that are not required for the transfer process. The condition in question looks somethi ...

javascriptnode.jsscripting

Utilizing CSS transitions to smoothly adjust the width of an element until it completely fills the container div in ReactJS

import React from 'react'; import PropTypes from 'prop-types'; import SearchIcon from '@material-ui/icons/Search'; import InputBase from '@material-ui/core/InputBase'; import { AccountCircle } from '@material-ui ...

javascriptcssreactjsmaterial-ui

"Tips for stopping users from using Ctrl+U to view page source in

Is there a way to prevent users from viewing the source code (HTML + JavaScript) of a page by disabling Ctrl+U in the browser? ...

javascriptphpjqueryhtml

Sort through each individual column in the table

My table filtering code isn't working, and I need to add a status filter with checkboxes. Can someone guide me on how to proceed? var $rows = $('tbody > tr'), $filters = $('#filter_table input'); $filters.on("keyup", fun ...

javascriptjquery

Automatically update the page when there is a change in the status of the

$counter = "SELECT countnumber FROM onairsystem WHERE id='1'"; $counterresult = $connection->query($counter); $rows = $counterresult->fetch_array(); $number = $rows['countnumber']; Is there a way to automatically refresh the we ...

javascriptphpajaxrefresh

Error: Unable to return callback response from NodeJs function

I have a function that handles the process of reading a private key from the filesystem and generating a JWT token. The code successfully reads the file and creates a token, but it encounters an issue when attempting to callback to the calling function. De ...

javascriptnode.jscallback

Running concurrent codes is not possible in Node.js serialport

I am attempting to stream data from the MSP432 xds110 in order to display it on my website in real-time. To achieve this, I have opted to utilize the node.js serialport library for data retrieval. You can find more information about serialport here: In m ...

javascriptnode.jsmicrocontrollernode-serialportmsp432

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far. HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="tex ...

javascriptjqueryhtmlcssnavigation

How can XML data be effectively showcased on a website?

I have a service that generates XML files every 10 seconds with server information. I am seeking a solution to showcase this data on a webpage. After researching online, it appears that utilizing AJAX would be beneficial as it permits the loading of dynam ...

javascriptasp.netajaxvb.netweb-services

I am interested in updating the content on the page seamlessly using Angular 6 without the need to reload

As a newcomer to Angular, I am interested in dynamically changing the page content or displaying a new component with fresh information. My website currently features cards, which you can view by following this Cards link. I would like to update the page ...

javascriptangulartypescriptcomponents

Restrict Recursive GraphQL Schema Query Depth with graphql-sequelize resolver in Node.js using express-graphql

In my code, I have two models called User and Post. My goal is to retrieve User information when querying a post, as well as obtain all of a User's posts when querying a user. These two models are associated in the following manner: User.hasMany(Pos ...

javascriptnode.jsgraphqlexpress-graphql

When utilizing the getIntersectionList function, IE 9 may experience a malfunction and cease functioning

I am currently working with SVG code and JavaScript, trying to achieve a specific intersection result. <svg id="svgSurface" width="500" height="500"> <defs> <marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="0" markerUnits ...

javascriptsvg

Solving complex promises in both serial and parallel fashion

My current function performs four tasks that must be executed in a specific sequence: - promise1 - promiseAfter1 // In parallel - promise2 - promiseAfter2 To ensure the promises are handled sequentially, I have structured two separate functions as follows ...

javascriptasynchronouspromise

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson