Having trouble choosing multiple options from autocomplete drop-down with Selenium web-driver in Python

I am currently in the process of automating a webpage built with Angular that features an auto-complete dropdown with numerous elements. My goal is to click on each individual element and verify if it populates all the fields below accordingly. Below is the innerHTML code for this dropdown:

<div class="mat-autocomplete-panel mat-autocomplete-visible" role="listbox" id="mat-autocomplete-0">
<!---->
<mat-option _ngcontent-c3="" class="mat-option" role="option" tabindex="0" id="mat-option-67" aria-selected="false" aria-disabled="false">
    <!---->
    <span class="mat-option-text">  Miss </span>
    <div class="mat-option-ripple mat-ripple" mat-ripple=""></div>
</mat-option>
<mat-option _ngcontent-c3="" class="mat-option" role="option" tabindex="0" id="mat-option-68" aria-selected="false" aria-disabled="false">
    <!---->
    <span class="mat-option-text">  SLCA </span>
    <div class="mat-option-ripple mat-ripple" mat-ripple=""></div>
    </mat-option>
<mat-option _ngcontent-c3="" class="mat-option mat-selected" role="option" tabindex="0" id="mat-option-21" aria-selected="true" aria-disabled="false">

My initial attempt using select resulted in an error indicating that the tag should be select instead of div. I'm now exploring alternative solutions or considering switching to a different language like JavaScript to automate testing on Angular. Any suggestions would be greatly appreciated.

javascriptpythonangularseleniumselenium-webdriver

Answer №1

Here is the recommended code to handle Autocomplete drop-down selections:

If the Autocomplete drop-down closes after selecting an option:

driver.find_element_by_xpath("//div[@id='mat-autocomplete-0']").click()

all_options = driver.find_elements_by_xpath("//span[@class='mat-option-text']")
i = 0
while i<len(all_options) : 
    driver.find_element_by_xpath("//div[@id='mat-autocomplete-0']").click()
    driver.find_elements_by_xpath("//span[@class='mat-option-text']")[i].click()
    i=i+1

If the Autocomplete drop-down remains open after selecting an option:

driver.find_element_by_xpath("//div[@id='mat-autocomplete-0']").click()    

all_options = driver.find_elements_by_xpath("//span[@class='mat-option-text']")
i = 0
while i<len(all_options) : 
    driver.find_elements_by_xpath("//span[@class='mat-option-text']")[i].click()
    i=i+1

We hope this solution helps!

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

The initial invocation of OidcSecurityService.getAccessToken() returns null as the token

Our internal application requires all users to be authenticated and authorized, including for the home page. To achieve this, we use an HttpInterceptor to add a bearer token to our API requests. Initially, when rendering the first set of data with the fir ...

angulartypescriptrxjsangular-auth-oidc-client

Unexpected JSON token error occurs in jQuery when valid input is provided

I encountered an error that I'm struggling to pinpoint. The issue seems to be related to the presence of the ' symbol in the JSON data. After thoroughly checking, I am positive that the PHP function json_encode is not responsible for adding this ...

javascriptphpjqueryjson

Incompatibility with semantic versioning and npm versions 5 and higher

Could you explain the necessity of using NPM 5 or later to prevent issues with semantic versioning? How does the package-lock.json file help in avoiding this problem? Would using the same package.json file on all development machines for a project also r ...

angularnpmversionsemantic-versioning

What is the best way to convert a dictionary into a string using a custom style?

I have a challenge of converting a dictionary type to a string format like: name=tom&age=12%sex=m Initially, I tried the following approach: params=sorted([(k, v) for k, v in dic.items()]) src="" for param in params: src+=param[0]+"="+param[1]+"& ...

pythonjson

axios: prevent automatic sorting of objects according to keys

When using axios, I am receiving an API response. To send the sorted API response based on name, I use the following endpoint: http://localhost:8000/api/ingredients/ordering=name The actual object received from my server looks like this: { 2:{"id":2 ...

javascriptajaxreactjsaxios

Sending a parameter from a click event to a function

Struggling with a jQuery and AJAX issue all night. I am new to both and trying to implement something similar to this example. I have an edit button with the ID stored in a data-ID attribute. Here's an example of what my button looks like: <butto ...

javascriptjqueryajax

There is a necessary pause needed between carrying out two statements

I am currently working with extjs 4.2 and I have encountered a situation where I am loading the store object in the following manner: var userDetailStore = Ext.create('Ext.data.Store', { model: 'Person.DetailsModel', autoLoad: ...

javascriptextjsextjs4.1extjs4.2

Utilizing Angular 8 (TypeScript) and .NET Core to send a GET request with dates as a parameter

I attempted to send 2 dates as parameters in the GET request, but I am only receiving this: Model public class Dates { public DateTime from { get; set; } public DateTime to { get; set; } } .net core [HttpGet] [Route("main/exportToEx ...

angular.net-coreangular-materialhttprequest

Receiving an `Invalid module name in augmentation` error is a common issue when using the DefaultTheme in Material

After following the guidelines outlined in the migration documentation (v4 to v5), I have implemented the changes in my theme: import { createTheme, Theme } from '@mui/material/styles' import { grey } from '@mui/material/colors' declar ...

javascriptreactjstypescriptmaterial-ui

Fetching Information From Database Using PHP

I am encountering an issue while attempting to transfer data from my HTML table to my modal (without using bootstrap). In the image below, you can see that I have successfully displayed data from MySQL database in the table. The problem arises when I clic ...

javascriptphpjqueryhtmlmysql

What is causing my Li elements to be unchecked in REACT?

Why is the 'checked' value not changing in my list? I'm currently working on a toDo app Here are my State Values: const [newItem, setNewItem] = useState(""); const [toDos, setToDos] = useState([]); This is my function: funct ...

javascriptreactjs

Looking to consolidate the models of two Flask pages that are currently sharing a database

Looking for some guidance on this issue. I have developed two pages or apps using flask (along with sqlalchemy) - one serving as the front page and the other acting as an admin panel or extranet for the first app. Both apps have their own views and models ...

pythonflaskflask-sqlalchemy

A step-by-step guide to incorporating dependencies in an AngularJS controller

I'm currently working on a MEANJS application and I want to integrate Snoocore into an AngularJS controller. Find more about Snoocore here 'use strict'; angular.module('core').controller('HomeController', ['$scope ...

javascriptangularjsdependency-injection

EJS.JS Error: Unable to find the title

I'm facing an issue with a script in express. I have a function that renders a view upon the success of another function. This project involves angular, node, express, and ejs as the view engine. However, when I try to render the view, I encounter an ...

javascriptangularjsexpressejs

Inject props into a Component nested within a Higher-Order-Component (HOC)

In attempting to grasp the concept of creating a React Higher Order Component from this particular article, I find myself struggling to fully understand and utilize this HOC. interface PopupOnHoverPropType { hoverDisplay: string; } const WithPopupOnHov ...

javascriptreactjstypescripthigher-order-functionshigher-order-components

An effective way to connect input fields from model forms to Vue

Typically, you can easily apply v-model to input fields that you manually create like these: <input class="form-control mb-2" name="username" v-model="username" type="text" placeholder="username" autocom ...

pythondjangovue.jsdjango-modelsdjango-forms

Understanding the functionality of a notification system

Planning to create an admin tasking system utilizing PHP, MySQL, and JavaScript. Curious about how the notification system operates and how it stores real-time data. Are there any good examples of a notification system? ...

javascriptphp

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

javascriptjqueryhtmljquery-ui

Merge objects based on specific property within an array of objects

Is there a way to merge objects based on one property and also add missing Days names in the output? Consider this example: var array = [ { "heure1": "14:00", "heure2": "17:00", "day&q ...

javascriptarraysobject

Can you explain the contrast between `/:foo*` and `/:foo(.*)` when used in express routes?

When using Express, it is possible to define endpoints with different paths: app.get('/:foo*', function(req, res) { ... }); app.get('/:foo(.*)', function(req, res) { ... }); Although these two paths may appear similar, what sets them ...

javascriptexpress