Error message: Unable to interact with element due to visibility issue

Is there a way to click on a radio button that appears on a webpage? Below is the code snippet:

HTML code:

<div class="small-checkbox red-theme raleway-regular text-muted2 position-relative">

        <div class="city-checkbox inline-block position-relative" ng-class="{'rounded-checkbox': main.current_city_id == 1, 'mb-20': main.ifDeviceIsPhone}">
            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect mh-20" for="mumbaiCity" ng-class="{'is-checked' : main.current_city_id == 1}">
                <input type="radio" id="mumbaiCity" class="mdl-radio__button position-relative vertical-middle" name="city" value="1" ng-click="main.setCity('Mumbai', 1)">
                <span class="mdl-radio__label position-relative font15"><img class="city-icon" src="../../../assets/img/cities/mumbai-icon.png">Mumbai</span>
            </label>
        </div>
</div>

Tesstcase:

// demo-test.js
describe('Protractor Demo App', function() {
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000000;

    it('check item count', function() {
        browser.get('<link>');
        element(by.id('mumbaiCity')).click();
    });

});

This test case is throwing an error:

1) Protractor Demo App check item count

Message:

Failed: element not visible

I also tried with:

element(by.css('[ng-click="main.setCity('Mumbai', 1)"]')).click();

However, this resulted in an error:

[16:16:26] E/launcher - Error: SyntaxError: missing ) after argument list

Any suggestions on how to successfully click the radio button?

javascriptangularjsseleniumselenium-webdriverprotractor

Answer №1

This issue is frequently encountered in test automation using selenium.

Below are some common solutions:

  • Ensure that the element you wish to click on is actually visible. Sometimes additional actions may be required to make the element visible, such as opening a dropdown menu for an option to appear.

  • Wait for the visibility of the element:

    var EC = protractor.ExpectedConditions;
var mumbaiCity = element(by.id('mumbaiCity'));
browser.wait(EC.visibilityOf(mumbaiCity), 5000);
mumbaiCity.click();

  • If there is another element with the same id that is invisible, refine your locator to target the specific element. For example:

    element(by.css(".city-checkbox #mumbaiCity")).click();
element(by.css(".city-checkbox input[ng-click*=Mumbai]")).click();

  • If multiple elements match the same locator, you can use "filter" to select a visible element:

    var mumbaiCity = element.all(by.id('mumbaiCity')).filter(function (elm) {
    return elm.isDisplayed().then(function (isDisplayed) {
        return isDisplayed;
    });
}).first();
mumbaiCity.click();

  • Hover over the element and then click using browser.actions():

    var mumbaiCity = element(by.id('mumbaiCity'));
browser.actions().mouseMove(mumbaiCity).click().perform();

  • Scroll into view of the element before clicking:

    var mumbaiCity = element(by.id('mumbaiCity'));
browser.executeScript("arguments[0].scrollIntoView();", mumbaiCity.getWebElement());
mumbaiCity.click();

  • Click the element via javascript (note any potential differences):

    var mumbaiCity = element(by.id('mumbaiCity'));
browser.executeScript("arguments[0].click();", mumbaiCity.getWebElement());

  • In some cases, maximizing the browser window may solve the issue:

    browser.driver.manage().window().maximize();

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

Tips for creating a new tab or window for a text document

Below code demonstrates how to open a new tab and display an image with a .jpg extension. Similarly, I want to be able to open a text document (converted from base64 string) in a new tab if the extension is .txt. success: function(data) { var ...

javascriptjqueryajaxdom

Having difficulty adding items to the shopping cart

While working on a simple checkout system using django and react, I encountered an issue. Upon clicking the add to cart button, instead of adding the item to the cart as intended, I receive a 404 page not found error. I suspect that the problem may lie in ...

javascriptpythonreactjsdjangodjango-rest-framework

A guide on implementing nested view objects in ui-router for angular applications

Unfortunately, I am not well-versed in Angular. My objective is to display multiple views on a user profile page using ui-router. These are my current routes: (function() { 'use strict'; angular .module('app.routes') .config(r ...

javascriptangularjsangular-ui-router

Discovering the power of VBA in combination with Selenium to pinpoint and interact with a particular cell within a table

I am attempting to access a specific cell within a table on a webpage. The cell I need to reach has an id of "flowTile_6". It is highlighted below. I have tried multiple methods, but all resulted in errors. One approach I attempted was using the followi ...

htmlexcelvbaselenium

Using ngFor directive to iterate through nested objects in Angular

Receiving data from the server: { "12312412": { "id": "12312412", "something": { "54332": { "id": "54332", "nextNode": { "65474&q ...

javascriptjsonangulartypescriptecmascript-6

Exploring JSON Data in Node-Red

Currently utilizing Node-Red for the purpose of counting individuals by implementing a flow that can successfully detect faces using visual recognition node. Presented below is the output from the Visual Recognition node taken directly from the Debug windo ...

javascriptjsonnode.jsnode-red

How to access the CSS and JS files in the vendor folder using linemanjs

Currently, I am in the process of developing a web application utilizing linemanjs. However, I have encountered an issue where the vendor css and js files are not being referenced correctly when explicitly included. I would appreciate any guidance on what ...

javascripthtmlcssnode.jslinemanjs

In Ruby, exploring the Watir HTMLElement Object index

If we take a look at this WATIR object: my_links["Reports"] => #<Watir::Anchor: located: true; {:tag_name=>"a", :index=>8}> We can easily retrieve the tag_name: my_links["Reports"].tag_name 2018-10-12 12:29:00 INFO Watir <- `Verifying ...

rubyseleniumwatir

Getting json data through ajax in asp.net

I am facing an issue with the variable data in the function ShowFavorites as it is showing as undefined even though my ajax call is returning a json string. <script type="text/javascript"> $(document).ready(function () { ShowFavorites(); fu ...

javascriptasp.netajax

Using Javascript to validate a PHP form that's dynamically generated: A comprehensive guide

I have designed a PHP form that requires users to select a radio button before submitting the form. Here is how it is set up: <form name="films" action="showing.php" method="post"> <table id="filmtable"> <tr><th>Title</th>< ...

javascriptphphtmlforms

How can I resolve a 404 error in JavaScript when trying to run a PHP script using XMLHTTPRequest and the file path is not found?

Every time I click the button on the user interface to trigger the Javascript communication with PHP in order to display a "Hello world" page, I keep receiving a "{"timestamp":"2021-06-10T20:14:59.671+00:00","status":404,"error":"Not Found","message":"","p ...

javascriptphpxmlspringspring-mvc

Update various attributes of a div element using JavaScript

I have a progress bar in Bootstrap that receives data through a JavaScript function. Check out the progress bar below: <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" ...

javascriptjquery

JavaScript - Unexpected fluctuations in variable values

After studying Japanese language, I decided to try my hand at experimenting with JavaScript by creating a simple FlashCard game for a project. The game generates an array of random numbers, fills the divs with 6 possible choices using jQuery, randomly sele ...

javascriptjqueryfunctionvariables

Display dynamic form with database value on click event

Seeking assistance to create a JavaScript function or any other method to address the issue I am facing. Currently, I have a functional pop-up form and a table connected to a database with queries. The pop-up form successfully appears upon clicking, howeve ...

javascriptphphtmljquery

Positioning elements using Tether in Bootstrap 4

Is it possible to extend Bootstrap 4, which currently uses tether.js for positions that only support "top", "right", "bottom", and "left", to include more options? Tether supports a total of 12 position options like "top left" or "top right". How can thi ...

javascripttwitter-bootstrap-4bootstrap-4tether

Angular template not refreshing automatically

Within my controller: $scope.deleteUser = function(user){ $.ajax({ url: "/users/" + user.id.toString(), method: "DELETE", success: function(result){ $scope.users = result["users"]; ...

javascripthtmlangularjsajax

What is the best way to order an array of objects within a MongoDB collection?

Currently, I am working with node.js and MongoDB. In my collection, I have defined the following schema: var project = new Schema({ head:{ head_task: String, userID: String }, access_users: { type : Array , "default" : []}, context_task: [ ...

javascriptnode.jsmongodbsortingmongoose

What is the method for obtaining command context in Chrome console through Selenium?

I attempted the code below, but unfortunately, it did not work for me. puts @driver.execute_script("window.dataLayer[0]") puts @driver.execute_script("console.log(window.dataLayer[0])") Manually entering "dataLayer" in the Chrome console displays the obj ...

javascriptrubygoogle-chromeseleniumselenium-webdriver

Obtain an array from an Ajax request using jQuery Datatables

I have integrated the jQuery DataTables Select plugin into my project to enable the selection of multiple rows from a table and storing their data inside an array. Subsequently, I am attempting to make an Ajax Request to pass this array to another PHP file ...

javascriptphpjqueryajaxdatatables

The switchToFrame function in PhantomJs is not functioning properly

<dependency> <groupId>com.github.detro</groupId> <artifactId>phantomjsdriver</artifactId> <version>1.2.0</version> </dependency> <dependency> <groupId>org.s ...

javaselenium-webdriverphantomjs