Protractor sendKeys method on Modal dialog is failing due to element visibility issues

I seem to be facing a strange issue with protractor.

My challenge lies in testing a form that is situated within a modal. Although I am able to verify that the modal is indeed open, I encounter difficulties when attempting to sendKeys to the input fields.

  element(by.id('modal')).click().then(function () {

    var modal = $('.modal');

    browser.wait(EC.visibilityOf(modal), 5000);

    expect(modal.isDisplayed()).toBeTruthy(); 

    element(by.model('userInput.firstName')).sendKeys('HELLO'); // <- this fails

  })

This test consistently fails with an ElementNotVisibleError. However, if I configure the modal to automatically open once the page loads (rather than upon clicking a button), ensuring that the modal is visible and then sending the keys works without any issues.

I would greatly appreciate any guidance or advice on how to resolve this issue.

javascriptangularjsseleniumtestingprotractor

Answer №1

To ensure the input field is visible, wait for its visibility:

var modalBox = $('.modal');
var userInputField = modalBox.element(by.model('userInput.firstName'));

browser.wait(EC.visibilityOf(userInputField), 5000);
userInputField.sendKeys('HELLO');

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

Issue with Angular application failing to fetch data from JSON server

I've been attempting to retrieve data from a local server, but so far I'm not getting any results. The concept is to have a service handle the retrieval process and return an observable for any components in need of the data to subscribe to. dis ...

javascriptangularangular2-observables

Is it possible to generate an interactive HTML form using JSON information?

When the user clicks the "get Form" button, a request is sent to the form API to retrieve information for rendering the form. Once the form is rendered, the user can then submit the form. This process can be repeated as needed. HTML: <body ng-app="Json ...

javascriptjqueryjsonangularjs-scope

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

I am currently working on customizing a one-page web template and I don't have much experience with Bootstrap. The template can be found at . My issue is that the menu items are not functional in Chrome. When I click on any menu item, nothing happens ...

javascripthtmlcsstwitter-bootstrap

What steps should be taken to identify a new path following a call to router.navigate?

Trying to interrupt a route change using a router guard. When I use: this.router.navigate([“myApp/userProfiles”]); After calling this, it passes through the CanDeactivate interface of the guard. The guard then needs to determine the actual destinatio ...

javascriptangularangular-ui-routerobservable

TestNG is reporting an error where it is unable to create an instance of a class when the testng.xml file contains over six classes. This issue

In regards to my project, I encountered an issue when running TestNG with 15 classes in testng.xml - I received an OutofMemory exception. However, after increasing the heap memory (in Eclipse), the problem was resolved. I recently added a build.xml file t ...

antseleniumwebdrivertestng

What is the process for executing JavaScript in a secondary thread in V8?

In the v8 engine, JavaScript code is only able to run in the main thread. My goal is to run JavaScript code in a non-main thread so that CPU-intensive tasks cannot interrupt the CPU time of the main thread. However, I am currently at a loss on how to accom ...

javascriptc++multithreadingv8

Creating a new service in Vue is a simple process that allows you to utilize powerful tools like this.$t and this.$alert

I've created a service file named message.vue <script> export default { methods:{ alert(msg,title){ this.$alertify.alert( title,msg); } } } </script> Here's how I use it: import me ...

javascriptvue.jsservice

When changing the dropdown option on a separate page in React/Next JS, all checkboxes show the clicked style as a result of utilizing useState

I have implemented checkboxes for three different categories: "Types", "Price", and "Categories". They function correctly, with data being passed to a separate checkbox component without any issues. The problem arises when I click a checkbox and then inte ...

javascriptreactjstypescriptnext.jstailwind-css

Exploring Date Comparisons in AngularJS

Currently, I am in the process of developing a web application using AngularJS and Rails. One of the features involves creating bookings through a bookings function. In the dashboard section of the app, I aim to have two tabs - one for Current Bookings and ...

javascriptruby-on-railsangularjs

Ways to conceal the lower details in DataGrid Material-UI

Utilizing the DataGrid component from MUI and I'm eager to conceal this element. Any suggestions on how I can achieve this? Thanks! ...

javascriptreactjsmaterial-ui

Top tip for implementing toggle functionality with a specified duration in React.js

I am incorporating React into my web application. I understand how to implement the toggle logic - maintaining a boolean value in my state and updating it when I interact with the toggle trigger. However, I am struggling with how to add animation to this ...

javascriptjqueryreactjsnpm

Ways to create a noticeable effect on an image button when hovering without causing a shift in the position

Check out my simple script here: http://jsfiddle.net/PA9Sf/ I am looking to make a specific button stand out when hovered over without affecting the position of other buttons on the page. The current implementation in the provided jsfiddle moves the butto ...

javascriptjqueryhtmlcss

Using Typescript to define the type for React's useState() setter function whenever

I'm working on setting up a React Context to handle parameters mode and setMode, which act as getter and setter for a React state. This is necessary in order to update the CSS mode (light / dark) from child components. I'm encountering a Typescr ...

javascriptreactjstypescripttypesreact-hooks

Determine if the JSON lacks an array within it

Utilizing an API to fetch results, the response received looks something like the following: {"currentPage":1,"numberOfPages":1,"totalResults":1,"data":[{"id":"Sf8xxo","name":"The Bear Reader Huckleberry Oatmeal Stout","nameDisplay":"The Bear Reader Huckl ...

javascriptjsonparsing

Transferring data from one of the three submitted forms by utilizing jQuery's AJAX function

Currently, I am facing a challenge with three forms on a website, where two of them are located in modal windows. My goal is to use ajax to send input values such as name, phone, email, and radio button selections (which vary in each form). However, I have ...

javascriptjqueryajax

AdonisJs experiencing issues with web socket.io functionality

Having trouble with Web socket.io in AdonisJs. I have been using a library called adonis5-scheduler to run tasks within Adonis. Shown below is one of my tasks: import { BaseTask } from 'adonis5-scheduler/build' export default class GetRoulette ...

javascriptnode.jsvue.jsnuxt.jsadonis.js

What steps do I need to take to grant authorization to chromedriver.exe?

While working on my face recognition project using Chrome driver, I encountered an issue in the 4th line of code below. How can I resolve the permission error for chromedriver.exe? code: data_path = '/content/drive/MyDrive/FaceRecognition/faces' ...

pythonseleniumselenium-webdriverselenium-chromedriver

Difficulty arises when attempting to run code when a checkbox is not selected

In my form validation process, I am facing an issue where I need to validate certain values only if a checkbox is unchecked. If the checkbox is checked, I want to use the values that were previously added. However, none of the existing code snippets seem t ...

javascriptvalidation

Various Utilizations through a Single Alexa Skill

In my skill SkillIntent, when asked about a specific game, it provides the description of that skill. Now, I want it to also inform WHO has that Skill when asked differently. Below is the code snippet: 'use strict'; var AlexaSkill = require(&a ...

javascriptnode.jsalexa-skills-kit

Displaying infowindow pop-ups on random markers on Google Maps every 3 seconds

Here lies the challenge. I am tasked with creating a Google map that displays multiple markers. Each marker must have a unique info window with distinct content. Upon opening the website, an info window randomly appears on one of the markers after 3 sec ...

javascriptgoogle-mapsgoogle-maps-markers