Exception Thrown When Element is Not Visible in Robot Framework

I encountered an ElementNotVisibleException error, even though the element appeared to be visible based on the screenshot in the logs. The button is controlled by JavaScript and can switch between enabled and disabled states. Here's the code for the disabled state:

<button id="continue" type="submit" class="btn btn-primary btn-lg next pull-right btn-group-vertical" data-bind="enable: selectedRegistrationCandidates().length > 0" disabled="">Continue</button>

And here's the code for the enabled state:

<button id="continue" type="submit" class="btn btn-primary btn-lg next pull-right btn-group-vertical" data-bind="enable: selectedRegistrationCandidates().length > 0">Continue</button>

Even though I verified that the element was enabled before attempting to click on it, I still received an ElementNotVisibleException when running the following steps:

Select Individual
   Click Element  ${lnkFirstPerson}
   Wait Until Page Does Not Contain   NOBODY SELECTED
   Wait Until Element Is Enabled    ${btnContinue}
   Click Element  ${btnContinue}
   Wait Until Page Contains    Return to Step 1

If anyone can shed some light on why this may be happening and offer a possible solution, it would be greatly appreciated.

javascriptselenium-webdriverrobotframework

Answer №1

There are two potential solutions in this scenario.

1) Navigate to the Frame containing the submit button:

If the Submit button is located within a different frame, you will need to first navigate to that frame and then click on the element.

Select Individual Click Element ${lnkFirstPerson}

   Wait Until Page Does Not Contain   NOBODY SELECTED

   Select Frame  **Locator**   # I have included the Select Frame Keyword here

   Wait Until Element Is Enabled    ${btnContinue}

   Click Element  ${btnContinue}

   Wait Until Page Contains    Return to Step 1

For more information, please visit: https://github.com/robotframework/Selenium2Library/issues/201

However, this approach is not common practice, so its likelihood of being the correct solution is low.

2) Utilize JavaScript to perform the action

You can try using the following keyword.

Select Individual

   Click Element  ${lnkFirstPerson}

   Wait Until Page Does Not Contain   NOBODY SELECTED

   Wait Until Element Is Enabled    ${btnContinue}

   Execute JavaScript  $("#continue").click();

   # I have included the JavaScript above as a comment to show the changes I have made more clearly, instead of the commented out Click Element below.

   #Click Element  ${btnContinue}

   Wait Until Page Contains    Return to Step 1

While this method is not recommended when writing scripts, as it does not verify if the submit button actually appears on the UI, it can still be used in situations where you are certain the element is present on the interface.

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

React.Suspense is looking for a different type of data following the update

After a recent update, I encountered an issue with my React.Suspense fallback triggering this error message: Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefine ...

javascriptreactjs

Employ React Hooks for modifying the class names of elements and their related siblings

I have a function component in React hooks that I am working on. The goal is to change the className to 'active' when any element in the list is clicked, and remove the className from the other elements. const SideBar = () =>{ const [active ...

javascriptreactjsreact-hooks

Acquire the item that is found in every array (Javascript)

In my data, I have multiple arrays like the following: { names: [0, 1, 2], gender: [2, 5, 1], boolean: [7, 2, 1, 6] } Is there a way to extract the value that appears in all arrays? For example, how can I retrieve the value 1 since it is prese ...

javascriptnode.jsarraysobject

Integrating additional information (HTML) into current content utilizing Vue JS data structures

I am attempting to use Vue JS to load content onto a page. The user interface consists of a select element, a textarea, and a button. I want to display data from a third-party API response on the page. The first item loads successfully, but subsequent item ...

javascripthtmlvue.js

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

javascriptjqueryhtmlcss

Determining the starting and ending position of text within an element using jQuery

Delving into the world of jQuery/JS has been both challenging and exciting for me. However, I've encountered a problem that's got me stumped. Here is a snippet of text that I need to work with: blablablabla <b data-start="" data-end="">#fo ...

javascriptjquery

Avoid the ability for individuals to interact with the icon embedded within a button

I'm currently working on a website where users need to interact with a button to delete an "Infraction." The button has a basic bootstrap style and includes an icon for the delete action. <button referencedInfraction="<%= i.infractionID %>" ...

javascripthtmljquerytwitter-bootstrap

Error encountered while attempting to import a Bootstrap JavaScript file in webpack

I am currently working on a Gridsome project (v0.7.23) where I have loaded the Bootstrap framework via npm. In this project, I am using node v14.18.0 through nvm. However, when attempting to import a Bootstrap JS component (specifically 'collapse&apo ...

javascriptwebpackbootstrap-5gridsome

Implementing Image Data in AngularJS: A Guide to Binding Images to IMG Tags

Allow me to explain the problem further. I am retrieving a user's profile picture by calling an API that returns image data, as shown in the screenshot below https://i.stack.imgur.com/t8Jtz.jpg https://i.stack.imgur.com/pxTUS.png The reason I canno ...

javascriptjqueryhtmlangularjs

How can I use a button created with jQuery's .html() method to conceal a <div>?

I am facing an issue with implementing a simple banner that should appear in an empty element only when specific values are returned by an Ajax call. In the banner, I want to include a Bootstrap button that hides the entire div when clicked. Due to my la ...

javascriptjqueryhtmlajaxbootstrap-4

Having trouble with KnockoutJS and its foreach functionality

Having trouble looping through an object using foreach in my code - the struggle is real after 6 months of not coding! This code snippet works perfectly: <div data-bind="text: $root[36].partition"></div> But I can't seem to get the fore ...

javascriptknockout.js

In JavaScript, escape is comparable to android decode

I used a JavaScript method to encode a string: var result = escape('Вася') The resultant string is: "%u0412%u0430%u0441%u044F" Now I need to decode this string in Java. How can I achieve this? The following attempt did not work: URLDecod ...

javascriptandroid

Issue encountered while trying to implement a recursive function for mapping through nested elements was not producing the

I am currently working on recursively mapping through an array of nested objects, where each object can potentially contain the same type of objects nested within them. For example: type TOption = { id: string; name: string; options?: TOption; } con ...

javascriptreactjs

Error in Express application due to uncaught SyntaxError

I am attempting to live stream data using websockets to Chartjs, however I keep encountering the following error. main.js:1 Uncaught SyntaxError: Unexpected token <https://i.sstatic.net/9OCI1.png https://i.sstatic.net/bmGeW.gif What could be causi ...

javascripthtmlnode.jsexpresschart.js

Can someone guide me on how to make an array filled with dates using Javascript?

I am working on developing a Javascript code that can identify all the days leading up to the current date. Here is what I have managed so far: var titleArray = [ "title1", "title2", ]; var pictureArray = today.toString(); var thumbArray = today.toString ...

javascriptjqueryhtml

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

javascriptcss

Troubleshooting Bootstrap 4: data-keyboard attribute malfunctioning

I am using a Bootstrap 4 carousel and have set the attribute data-keyboard="true" Unfortunately, the keyboard navigation feature is not working even when I focus on the carousel with the mouse first. I want the carousel to be interactive with t ...

javascriptbootstrap-4carousel

How can we translate this php json_encode function into Node.js?

Seeking the equivalent Node.js code for this PHP Script: $SMA_APICall = "https://www.alphavantage.co/query?function=SMA&symbol=".$symbolValue."&interval=15min&time_period=10&series_type=close&apikey=R3MGTYHWHQ2LXMRS"; $SMAres ...

javascriptphpnode.js

Blackberry Browser's Window.Opener Feature

Does anyone else experience issues with the blackberry browser(5.0) and the javascript window.opener function? I couldn't find much help on Google regarding this problem. We have a pre-existing website that successfully populates parent window form f ...

javascriptmobileblackberrycross-browser

Achieving Horizontal Alignment of Tab Labels and Icons in Material-UI with Tabs API

I am currently attempting to customize the Material UI CSS in order to align both the phone icon and text on the same line and closer together. After doing some research, I stumbled upon the Tabs API which seemed promising. Upon further inspection, I disc ...

javascripthtmlcssreactjsmaterial-ui