Protractor is unable to locate the password input field on Gmail using its ID

Currently, I am in the process of configuring Protractor to test my application. However, I am encountering a roadblock as it requires authentication through Gmail and I am struggling with the login process:

describe('Vivace Home page', function() {

  var hasClass = function (element, cls) {
    return element.getAttribute('class').then(function (classes) {
      return classes.split(' ').indexOf(cls) !== -1;
    });
  };

  beforeEach(function() {

    browser.ignoreSynchronization = true;
    browser.get('/');

    var emailInput = browser.driver.findElement(by.id('Email'));
    emailInput.sendKeys('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbabbaaeb79c9bbcb6bab2b7f5b8b4b6">[email protected]</a>')
    
    var nextButton = browser.driver.findElement(by.id('next'));

    nextButton.click().then(function() {
      browser.pause();
      var passwordInput = browser.driver.findElement(by.id('Passwd'));
      console.log(passwordInput);
      passwordInput.sendKeys('11111');
      // var signInButton = browser.driver.findElement(by.id('signIn'));
    })
  });

  it('should have the correct title', function() {
    expect(browser.getTitle()).toEqual('InRhythm - Vivace');
  });
});

During the execution, Protractor successfully opens the Gmail page, enters the email address, clicks the next button. When I pause the browser, I can visually confirm that the password input field with the ID "Passwd" is present on the page as seen in the inspector tool. However, I'm unable to access it to complete the login process.

When I eliminate the browser.pause, I encounter the following error:

Failed: no such element: Unable to locate element: {"method":"id","selector":"Passwd"}

Answer №1

Watch out for it until it becomes visible:

var EC = protractor.ExpectedConditions;
var usernameInput = element(by.id('Username'));

browser.wait(EC.visibilityOf(usernameInput), 5000);
usernameInput.sendKeys('12345');

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 data stored in an array of objects

code props.thumbnails.forEach(value=>{ console.log(value.photo.thumbnail_url); }) error TypeError: Cannot read property 'thumbnail_url' of undefined Trying to loop through props.thumbnails array and access the thumbnail_url pro ...

Uploading documents using AngularJS and Express.js

I'm currently working on a project that involves uploading files using AngularJS and Node.js (with Express.js). To facilitate this process, I am utilizing danialfarid/angular-file-upload. Within my view (built with jade), the code snippet below showca ...

How to move rows between tables using AngularJS

Our dedicated team is currently working on enhancing functionalities in ServiceNow. One of our essential requirements involves transferring rows from the "Sending" table to the "Receiving" table, while also enabling the option to delete rows from the "Rece ...

Generating hierarchical structures from div elements

Looking for guidance on how to parse a HTML page like the one below and create a hierarchical Javascript object or JSON. Any assistance would be much appreciated. <div class="t"> <div> <div class="c"> <input t ...

What is the best way to utilize the `Headers` iterator within a web browser?

Currently, I am attempting to utilize the Headers iterator as per the guidelines outlined in the Iterator documentation. let done = false while ( ! done ) { let result = headers.entries() if ( result.value ) { console.log(`yaay`) } ...

Utilizing Angular's ngShow and ngHide directives to hide spinner when no data is retrieved

I'm having an issue with the HTML code below. It currently displays a spinner until a list of tags is loaded for an application. However, the spinner continues even if no events exist. I want to make the spinner disappear and show either a blank inpu ...

Error: Webpack is unable to load PDF file: Module parsing unsuccessful. A suitable loader is required to manage this file format

I am relatively new to using webpack for my projects. Recently, I wanted to incorporate a feature that involved displaying PDFs. After some research, I came across the "react-pdf" library and decided to give it a try. While everything worked smoothly in a ...

Accessing dropdown selection in Javascript-Json: A Comprehensive Guide

My dropdown list is being populated dynamically using json. The selected option from the first dropdown determines the options in a secondary dropdown. I need to use the selection from the second dropdown to automatically fill out two more fields. For exa ...

Increase the space below the footer on the Facebook page to allow for an

I recently created a webpage at and noticed that it is adding extra height below the footer on my Facebook page: "" I am seeking assistance on how to remove this additional 21px height below all content in the footer. I have tried various templates but n ...

Refresh the array object following a personalized filter

I am currently using a custom filter to aggregate a $scope object within an ng-repeat block. Here is my code snippet: $scope.myobj = isSelected ? $filter('customFilter')($scope.origObj) : $scope.origObj In the above code, $scope.myobj is util ...

What is the process of incorporating externally managed components in Vue.js?

After exploring various libraries that integrate an external library and their DOM elements with Vue.js, I noticed that most of them only add child elements to the Vue-managed DOM node. To simplify the use of the new Stripe V3 API, I developed Vue-Stripe- ...

PHP is unable to extract an email address from the $http post method in Angular

There seems to be an issue with the email address not being received properly when posted to the server. The @ symbol is causing the problem, while the rest of the email address appears fine. angular: $http({ method: 'POST', ...

Does anyone know of a way to integrate a calendar feature into a React application using a library

Greetings to everyone, I trust you are all enjoying a fantastic day. I am in search of an interactive calendar similar to this one for one of my applications https://i.sstatic.net/D3S3a.png Does anyone know of a React library that could assist me in crea ...

Get the values of var1 and var2 from the URL in PHP, for example: `example.php?var1

Currently, a portion of my website operates by using GET requests to navigate to profiles or pages. However, I am concerned about the scenario where a user visits someone's profile page (requiring one GET) and then clicks on a sub-tab within that prof ...

What is the process of incorporating a lowercase normalizer into an Elasticsearch mapping object?

I'm attempting to incorporate a normalizer with a lowercase option into my mapping object, as detailed in the official Elasticsearch documentation Below is an example of my mapping object: const schema = { date: { type: 'date' ...

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...

The custom validation in Node.js using Express-Validator is ineffective

I have implemented custom validators using express-validator to include specific validations: middlewares.js module.exports = function (app) { console.log('making sure I am being called'); return function (request, response, next) { ...

Ways to have a React Component trigger a function with each state update

Using this specific component, the getDisplay function is triggered on every update like normal. When the <div> element is clicked, it becomes hidden: class Example extends React.Component { constructor(props) { super(props); thi ...

Working with Vue.js: Utilizing computed properties to iterate through a JSON data structure and generate a new

This is a computed property in Vue.js: shopCart() { var scart = [], group, node; scart.push({ payMethod: 0, transactionReference: "", RoomNumber: 0, addressId: 0, deliveryMinutes ...

Using jQuery to fetch data asynchronously

I am currently dealing with a web application that needs to carry out the following task. It must send GET requests to a web service for each date within a selected date range, yet this process can be time-consuming. Since I plan to visualize the retrieved ...