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

Error: Cannot locate module: Vue not found, incorrect path specified

I am facing an issue with my webpack configuration. I have placed my webpack.config.js and node_modules in a subfolder. When attempting to run the command npm run build, I encounter the following error: ERROR in ../public/Vue/Components/Rating.vue Module n ...

javascriptwebpackvue.js

"I'm looking for a solution on integrating Osano CookieConsent into my Next.js application. Can

I'm facing a bit of a challenge with incorporating the Osano Cookie Consent JavaScript plugin into my nextjs app. I've been attempting to set up the cc object by initializing it in the useEffect of my root landing page: const CC = require( " ...

javascriptreactjscookiesnext.js

Establishing a small boutique utilizing Vue.observable for property getters

I am currently importing the createStore function into a store.js file and passing an object with state properties and mutation functions as an argument, which is working well. createStore.js import Vue from 'vue' function createStore({ state, ...

javascriptvue.jsvuejs2vuejs3

RecoilRoot from RecoilJS cannot be accessed within a ThreeJS Canvas

Looking for some guidance here. I'm relatively new to RecoilJS so if I'm overlooking something obvious, please point it out. I'm currently working on managing the state of 3D objects in a scene using RecoilJS Atoms. I have an atom set up to ...

javascriptreactjsthree.jsrecoiljs

Creating a Page with Python Selenium for JavaScript Rendering

When using Python Splinter Selenium (Chromedriver) to scrape a webpage, I encountered an issue with parsing a table that was created with JavaScript. Despite attempting to parse it with Beautiful Soup, the table does not appear in the parsed data. I am str ...

javascriptpythonseleniumweb-scraping

React Native: error - unhandled action to navigate with payload detected by the navigator

Having trouble navigating from the login screen to the profile screen after email and password authentication. All other functions are working fine - I can retrieve and store the token from the auth API. However, when trying to navigate to the next screen, ...

javascriptreactjsreact-nativefrontend

What is the best way to alter a specific value within an object without losing other important data?

I'm currently working on developing a function that will activate when the count either matches or is half the initial price required to open, and it should not reset to false even if the count drops back to 0. Below is some sample data: openData = { ...

javascriptobject

Exploring the implementation of query parameters in Nest.js

I am currently a freshman in the world of Nest.js. Below is an excerpt from my code: @Get('findByFilter/:params') async findByFilter(@Query() query): Promise<Article[]> { } I have utilized Postman to test this specific router. ht ...

javascriptnode.jstypescriptexpressnestjs

Guiding motion of a parental container using a button

This seems like a fairly straightforward task, but I'm getting a bit frustrated with it. Is there a way to move an entire div by simply holding down the mouse button on a particular button? let container = document.getElementById('abo ...

javascripthtmlmouse

Vanishing Submenus

I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...

javascripthtmljquerycss

Using an external module in a Vue SFC: a beginner's guide

Recently delving into Vue, I'm working on constructing an app that incorporates Typescript and the vue-property-decorator. Venturing into using external modules within a Single File Component (SFC), my aim is to design a calendar component utilizing t ...

javascripttypescriptvue.jscomponentsvue-component

Leveraging thousands of on() event listeners in Firebase demonstrates exceptional design

We are looking to perform operations on our Firebase database and modify data based on user input from their mobile devices by changing a flag. Currently, we are using the `on()` method to listen to specific flags within each user's node. This listen ...

angularjsnode.jsfirebase

An advanced template system incorporating dynamic scope compilation

My project requires a unique solution that cannot be achieved with standard data-binding methods. I have integrated a leaflet map that I need to bind with a vue view-model. While I was able to display geojson features linked to my view, I am facing chall ...

javascriptdata-bindingleafletvue.js

Add a sound file to the server and configure the images based on the server's response

I am a newcomer to JavaScript and AJAX, and I am facing an issue while trying to upload an audio file to the server and display the image from the server response. When attempting to pass the audio file from the input tag to an AJAX call, I encounter an il ...

javascriptjavahtmlajaxjakarta-ee

ng-click="showInventory()" onClick="currentTemplate='/inventory.html'" Not

I'm facing an issue with my menu list. When I apply the ng-repeat directive, it seems to not work properly. However, when I remove the ng-repeat, everything functions as expected. <div class="reports_header_tabs_holder"> <span ng-repea ...

javascriptangularjsangular-template

Issue with updating JSON data

After implementing the following code in my AngularJS table to remove a row: $scope.removeRow = function (index) { if (index === -1) { alert("Something has gone wrong"); } else { $scope.budgetdetails.splice(index, 1); } I have noticed that my JSON data a ...

angularjsjsonasp.net-mvc-4

Obtain the response header variable within a Shiny application

In Apache, the LDAP login is passed to a variable called X-Remote-User in the header: I am unsure how to retrieve this information in my Shiny app. Does anyone have any ideas? Maybe using JavaScript could be a solution? ...

javascriptapacheldapshinyshiny-server

Endless Loop of Http Redirects in Node.js with Express

I need assistance with the code below which is meant to redirect all http traffic to https. // Implement redirect logic to ensure usage of https in production, staging, and development environments app.use((req, res, next) => { // Do not redirect to h ...

javascriptnode.jsexpress

Customizing the appearance of a date input field by passing an object with Vue.js

I created a dynamic table using Vuejs, where each cell contains an input element set as readOnly initially. The table also includes an 'edit' button for each row, which, when clicked, changes to 'save' and allows editing of the input el ...

javascriptvue.jsvuejs2

If the condition has a class name of condition, then display

Having performance issues due to slow data rendering with each tab using a partial view. The code snippet for each tab is as follows: <div class="tab-content" ng-controller="MyController"> <div id="tab-1" class="tab-pane fade active in " ng-i ...

javascriptasp.net-mvcangularjs