Interact with a React dropdown using SeleniumBase

I am having trouble testing a dropdown on a webpage I built with React and the Ant Design framework. I am attempting to use SeleniumBase or Selenium Webdriver for the task.

The dropdown in question can be viewed here: https://ant.design/components/select/

It is called "Select with the search field" and has three options: Jack, Lucy, and Tom.

Despite identifying the XPath as

'//*[@id="rc_select_13"]'
, I am unable to successfully click and select an option.

from seleniumbase import BaseCase

class MyTestClass(BaseCase):
    def test_ant_dropdown(self):
        url = "https://ant.design/components/select/"
        self.open(url)
        self.assert_title("Select - Ant Design")
        self.click_xpath('//*[@id="rc_select_13"]')

The code above throws a

selenium.common.exceptions.ElementNotVisibleException
error.

In my manual testing, clicking on the dropdown first before selecting an option seems to work. I suspect I need to implement a click event before using self.select_option_by_text().

Answer №1

This occurrence can be attributed to the element being rendered with zero opacity. SeleniumBase is programmed not to interact with elements it deems as invisible.

For possible solutions, refer to this link: https://github.com/seleniumbase/SeleniumBase/issues/612

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

Displaying a text in a Django template as a JSON entity

I am currently facing a challenge with an angular app that sends JSON data to a Django backend. The Django application saves the JSON data into a database and later retrieves it to send it back to the angular app. However, I am struggling to get this entir ...

Determine the total quantity of colored cells within a row of an HTML table and display the count in its own

I need assistance with a table that has 32 columns. From columns 1 to 31, I am able to fill in colors by clicking on the cells. However, I now want to calculate and display the number of cells that are not colored in the last column. This task must be co ...

Electron Developer: "An issue has occurred within the primary process - Callback function missing"

My Electron application runs smoothly when launched from the command line with npm start. However, I am now looking to distribute the application as user-friendly installers for Mac/Windows/Linux. To achieve this, I am utilizing Electron-Builder for packag ...

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

The environmental variable remains undefined even after it has been established

I've been experimenting with setting my environment variable in the package.json file so that I can access it in my server.js file. Despite trying NODE_ENV=development, set NODE_ENV=development, cross-env NODE_ENV=development, and export NODE_ENV=deve ...

What is the process for customizing the anonymous/default profile in Firefox?

Trying to automate a test case using Selenium where files are downloaded has presented a challenge. When attempting to download a file in Firefox, a dialog box typically appears giving the option to save or open the file. To bypass this and automatically ...

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

I'm working with an element in my HTML where I need to determine the type of a variable, specifically whether it's a boolean or not. <button process-indicator="{{typeof(button.processIndicator) === 'boolean' ? 'modalProcess&apo ...

Tips for customizing the background color of the MUI Menu Popover within a TextField that has the select property

In my quest to customize the appearance of a popover or menu in a TextField with the 'select' property, I referred to MUI customization docs for guidance. Successfully changing the text and label color of a TextField using the code below: const u ...

When selecting a different file after initially choosing one, the Javascript file upload event will return e.target as null

Currently, I have implemented file uploading using <input>. However, when attempting to change the file after already selecting one, the website crashes and states that event.target is null. <Button label="Upload S3 File"> <input ...

Modifying an element's value according to user input: Step-by-step guide

Within my dropdown menu, there is a single option labeled "Others". Upon selecting this option, a textbox appears allowing me to input custom text. Is it possible to dynamically update the value of the <option value="Others">Others</option>, ...

Scrapy-splash seems to be encountering difficulties in extracting elements during the scraping process

My attempt to extract data from this Why is Splash not working here? Does anyone have a solution for me? Your assistance will be highly appreciated! ...

Tips for implementing focusout on multiple elements while avoiding it when switching focus between them

Looking to create a searchable input that displays a dropdown of possible values on focusin, populated by server-side language. Attempted using focusin on elements not involved with the following code: $("body").not($(".dropdownSearch") ...

The Page Object Model in Selenium Python seems to be malfunctioning

My Python code using Selenium for POM is not functioning correctly. I am unsure of what went wrong, so I am pasting my code below and seeking help to resolve the issue. index.py The location is = MyProject/Testmethods/index.py // Python code with Sele ...

Manipulating the display style of an element without using jQuery

Could anyone assist me with this issue? I am currently facing a challenge in making the following script functional. It is intended to hide the button after it has been clicked. The script is being called through Ajax and PHP, so I am unable to utilize jQ ...

Using AngularJS to extract data from a JSON feed that contains a namespace

Just diving into Angular and I'm loving it. Struggling with parsing a JSON feed that has namespaces, need some help: Here's an example from the JSON feed: "title": { "label": "Fuse" }, "im:name": { "label": "John Doe" }, "im:image": [ { ...

Utilize JavaScript to implement CSS using an "if" statement

I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script. Unfortunately, I am facing issue ...

javascript enables smooth and continuous scrolling

<html> <style type="text/css"> #news { position: relative; box-shadow: 1px 4px 5px #aaa; text-align: left; padding: 5px; line-height: 20px; height: 235px; background: white; border: 1px solid #ccc; border-radius: 15px; background: #eee; wi ...

Dealing with an unspecified parameter can be tricky - here's how you

Currently, I am in the process of developing an angular application. In this project, there is a specific scenario that needs to be handled where a parameter is undefined. Here's a snippet of my code: myImage() { console.log('test') ...

The jQuery function $.fn.myfunction appears to be malfunctioning

Here's the code I'm working with: [[A]] // jquery.fn.code (function( $ ){ $.fn.flash = function(duration) { this.animate({opacity:0},duration); this.animate({opacity:0},duration); }; })( jQuery ); 1. $(document).ready ...

No data appears to be populating the Javascript data list, yet no errors are being displayed in

I'm facing an issue where I have data that I'm using to create two arrays, but they both end up empty without any errors in the console. Below is the data: mydata = { "id": "661", "name": "some name", "description": "some desc", ...