Struggling to choose an option from the autocomplete feature with protractor

<select name="Name" class="metaselect ignore" style="display: none;" xpath="1">   <option value="00000000-0000-0000-0000-000000000000" selected="selected">-- New --</option>    <option value="bd434f35-90db-e911-aa59-a96c125b4266">AddtoTest</option>    <option value="e8b6fd1b-e2f3-e911-aa64-e16c52c442dc">APINV_EPIC06</option>    <option value="35cfdd50-c47a-e911-aa37-8fe9ba6f0d87">Approve</option>    <option value="70da50aa-e2a3-e911-aa45-8f65b76e1edb">Basic</option>    <option value="5af85ad8-5ac0-e911-aa4f-b51108e06dbe">cont</option>    <option value="1c9b4449-90db-e911-aa59-a96c125b4266">Contentgenrat</option>    <option value="7ea80473-ecdd-e911-aa5b-cc08702b7e65">CTB1</option>    <option value="fb0b16cb-5fc9-4938-8cdb-b28b0ac3a065">Default</option>    <option value="5b904ca0-8adb-e911-aa59-a96c125b4266">delete</option>    <option value="9cd4dc48-910b-ea11-aa6c-879f4a104148">GP - US Expense Report</option>    <option value="7a87e6ae-75b3-e911-aa4b-a33f065bbcc1">INVOICE</option>    <option value="2860a55d-90db-e911-aa59-a96c125b4266">norconnoradd</option>    <option value="df57386a-90db-e911-aa59-a96c125b4266">olaa</option>    <option value="f299ad9c-91db-e911-aa59-a96c125b4266">qwerty</option>    <option value="2fa1a597-63d9-e911-aa59-a96c125b4266">Test1</option>    <option value="14d4d010-5bc0-e911-aa4f-b51108e06dbe">ton</option>    <option value="4e0506f8-bd7a-e911-aa37-8fe9ba6f0d87">View</option>    <option value="15086a03-ebc8-e911-aa54-ce643b10106b">WithNavFieldGroup</option>   </select>
<input "="" class="ui-state-default isCombo [object Object] ui-autocomplete-input ui-widget ui-widget-content ui-corner-left metaselect" autocomplete="off" name="Name" data-uicombobox="[object Object]" xpath="1">
<a tabindex="-1" class="ui-button ui-widget ui-button-icon-only ui-corner-right ui-button-icon" role="button" xpath="1"><span class="ui-button-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-icon-space"> </span></a>

await element(by.xpath("//span[@class='ui-combobox']//input[@name='Name']")).sendKeys("cont);

alternatively

this.coreComponent.element(by.cssContainingText("option", value))

Our application isn't recognizing the element when running with protractor. Neither of the above options are effective.

typescriptseleniumprotractorwebdriverdisplay

Answer №1

According to the HTML structure, the element is nested within a <select> tag that has a style attribute with the value of "display: none;"

This means that Selenium will not be able to interact with the element because it is not visible.

Solution

To fix this issue, you should remove the style attribute with the value of "display: none;" and then try interacting with the element.

PS: If possible, click on the <select> element so that the options become visible

References

You can find some relevant discussions about elements with style="display: none;" in:

  • Expected condition failed: waiting for element to be clickable for element containing style=“display: none;”
  • How can i upload files on dropzone.js with style=“display: none;” using Selenium?
  • Element changes from display: none to display:block selenium python

There are also discussions on Auto Complete / Auto Suggestions that might be helpful:

  • Selecting options from Auto Complete Dropdown using selenium web driver in python
  • How to search, arrow down and press enter with Selenium
  • How to automate Google Home Page auto suggestion?

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

Using Firebase orderByChild to access a nested object in the database

In my current project, I am utilizing a real-time database with the following data structure: { "users": { "1234": { "name": "Joe", "externalId": "384738473847", }, ...

typescriptfirebasefirebase-realtime-database

Having trouble with validating forms in Angular 4

Recently acquainted with Angular 4, I am currently working on integrating form validation messages in my application. While the validation message displays as expected, I am facing an issue where the text field and label color do not change based on the s ...

angularformstypescriptbootstrap-4

Tips for developing a strongly-typed generic function that works seamlessly with redux slices and their corresponding actions

Currently, I am working with @reduxjs/toolkit and aiming to develop a function that can easily create a slice with default reducers. Although my current implementation is functional, it lacks strong typing. Is there a way to design a function in such a man ...

reactjstypescriptreduxreact-reduxredux-toolkit

"An Inquiry into RSpec: What causes the MethodError for undefined method in my code, while this How-to guide

After finding a solution to my previous issue, it seems that this approach could provide the necessary help in creating a test that iterates through multiple elements using RSpec. However, I am puzzled as to why the following code does not work within my ...

seleniumrspec

What is the best method for interacting with a blocked element in Protractor?

Whenever I attempt to click a button, a popup seems to appear in front of it, causing my automation script to fail with an error message stating that the element is intercepted and not clickable. Even after scrolling down to the element with a function, th ...

javascriptseleniumautomationprotractor

The UL style attribute was swiftly altered from display:none to display:block, but during that split second, it was not able to capture the list of li elements within the ul

Dropdown Issue: Upon clicking on the div element, the UL style attribute changes from display:none to display:block. However, this transition happens so quickly that it is difficult to capture the list of li elements within the ul. <div id="main_filter ...

c#seleniumselenium-webdriverxpathselenium-iedriver

Unable to allocate FormArray

Just delved into learning Angular and encountered a snag. I am trying to add and remove textfields for a form, so I attempted the following code in my component.ts file: import {FormBuilder, FormGroup, FormArray } from '@angular/forms'; This is ...

typescriptangular5

Is there a way to exclusively view references of a method override in a JS/TS derived class without any mentions of the base class method or other overrides in VS Code?

As I work in VS Code with TypeScript files, I am faced with a challenge regarding a base class and its derived classes. The base class contains a method called create(), which is overridden in one specific derived class. I need to identify all references ...

javascripttypescriptvisual-studio-code

Prisma's Node.js include feature fails to consider the grandparent ID

Using Prisma ORM in my Node.js project, I have the following schema as an example: model User { id Int @id @default(autoincrement()) answers Answer[] } model Product { id Int @id @default(autoincrement()) questions Question[] } model ...

node.jstypescriptprisma

Can Typescript restrict a value to only exist within a specified set of key names within the same object?

I am completely new to Typescript and I am fascinated by the way it can check types. One thing I would like to know is if Typescript can be used to verify at compile time whether a value's domain falls within a predefined set of key names that are de ...

typescript

What prevents ts-morph from retrieving the classes within a TypeScript project?

Utilizing ts-morph, I am examining the inheritance relationships of classes in a project: For testing purposes, I have downloaded an open-source projectantv/x6: import { Project } from "ts-morph"; const project = new Project(); project.addDire ...

typescriptts-morph

Using Java lambda expressions for regular expressions is a powerful tool that can help streamline your code

The code snippet below demonstrates extracting elements from a list and splitting the text after encountering a "(". for (WebElement element : measureKeys) { String[] measure = element.getText().split("\\("); testing.add(measure[0]) } A ...

javaseleniumlambdajava-8

Angular and Node version discrepancies causing problems

This particular CLI version is designed to work with Angular versions ^11.0.0-next || >=11.0.0 <12.0.0, however an Angular version of 13.0.0 was detected instead. If you need assistance with updating your Angular framework, please refer to the follo ...

node.jsangulartypescriptnpmangular-cli

Angular 13: How to Handle an Empty FormData Object When Uploading Multiple Images

I attempted to upload multiple images using "angular 13", but I'm unable to retrieve the uploaded file in the payload. The formData appears empty in the console. Any suggestions on how to resolve this issue? Here is the HTML code: <form [formGro ...

typescriptfile-uploadangular13

The loading template remains visible despite the Eventsource being closed when using the Async Pipe

How can I resolve the issue I'm facing with the Angular async pipe and event source while using Spring boot WebFlux? I need to display a "loading data" message until the API call is complete. Once the API fetches data, I want to show the retrieved dat ...

angulartypescriptobservableserver-sent-eventsasync-pipe

Geocode promise left unattended

After reviewing my code, I discovered that it is executing too quickly for use in the Angular template. Here is an excerpt of the problematic code: this.dataService.getSomeData().subscribe(async (res) => { this.historyList = res; this.historyList.fo ...

typescriptgoogle-mapsgoogle-maps-api-3promiseasync-await

How to verify if an unknown-type variable in TypeScript contains a specific property

When using typescript with relay, the props passed down are of type unknown. Despite my efforts, I am unable to persuade the compiler that it can have some properties without encountering an error: <QueryRenderer environment={environment} query={te ...

reactjstypescriptrelay

What is the best way to end a web browser session during the shutdown of a Python application?

I have encountered an issue while writing a python code that requires the use of selenium webbrowser inside one of my classes. My goal is to ensure a selenium session ends correctly when exiting python. To achieve this, I store the webbrowser variable as ...

pythonseleniumselenium-webdriver

How can we verify if a React component successfully renders another custom component that we've created?

Consider this scenario: File ComponentA.tsx: const ComponentA = () => { return ( <> <ComponentB/> </> ) } In ComponentA.test.tsx: describe("ComponentA", () => { it("Verifies Compo ...

reactjstypescriptunit-testingjestjstdd

Dealing with external pop-ups can be tricky, especially when the necessary information is not found in the HTML content of the

Currently, I am utilizing Python with Selenium for automating tasks on a router page. Upon clicking the checkbox button, a pop-up appears that does not provide any relevant information in the HTML page. Could someone please advise me on how to programmat ...

python-2.7selenium