Choosing an element in Protractor based on an HTML attribute value that contains a specific text

Having trouble figuring out how to target an element that lacks a standard unique id or class. How can I locate this input element using Protractor?

Please note that I am unable to use the ComboBoxInput_Default class because it is shared across multiple page elements. Additionally, there is no clearly identifiable parent element within at least 10+ DOM levels.

<div style="display:inline; white-space: nowrap;" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection" class="ComboBox_Default">
  <input type="text" style="width: 133px; height: 15px;" delimiter=";" class="ComboBoxInput_Default" value="-select-" name="ctl00$ctl31$g_b56afa08_7869_450c_8871_f6759a89d9b1$ctl00$WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" autocomplete="off">   
<div>

The only distinctive attribute that sets apart each of these inputs is tacked onto the end of the generated id, which is 

Solution_MultiComboSelection_Input
.

If I had to select this element with jQuery, I would resort to the (not ideal) contains method like 

$( "input[name*='Solution_MultiComboSelection_Input']" )
. Is there a similar approach in Protractor for locating elements in this manner?

javascriptseleniumtestingprotractorend-to-end

Answer №1

If you want to target elements that contain or end with a specific ID, you can utilize the "contains" or "ends-with" CSS selector like so:

element(by.css("input[id*=Solution_MultiComboSelection_Input]"));
element(by.css("input[id$=Solution_MultiComboSelection_Input]"));

Answer №2

If the element with the unique class ComboBoxInput_Default is the only one of its kind on the page, you can target it specifically by using: element(by.css('.ComboBoxInput_Default'))

For more examples and information on selectors, check out this resource.

Answer №3

It's difficult to confirm without viewing the entire page, but you could attempt...

$('input[value="-select-"].ComboBoxInput_Default);

Alternatively, you may try...

$('div.ComboBoxInput_Default input.ComboBoxInput_Default);

However, adding an identifier to the code would be the optimal solution. I hope this information proves helpful!

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

Dialogue box closes automatically within a dropdown menu

I am using shadcn in my next.js 13 project and I want to implement a dropdown feature that allows users to edit or delete an entry. However, when the user clicks on "delete", the dialog pops up for only about 0.5 seconds before closing along with the dropd ...

javascriptreactjsnext.js

What causes a standard React component with a default render prop to not pass PropTypes validation successfully?

I'm currently working on a React component with a render-prop that has a generic type. To improve usability, I want to set a default value for the render-prop. The code is functioning correctly, but during type-checking, I encountered a warning regard ...

javascriptreactjstypescriptjsxreact-proptypes

Error: Could not locate local grunt on Windows 7 Professional

When attempting to initiate grunt, an error message is displayed: c:\repositories\kunde_1\themes-projekt_1\projekt_1-responsive\source>grunt grunt-cli: The grunt command line interface. (v0.1.13) Fatal error: Unable to find lo ...

javascriptnode.jsgruntjsnpminstallation

Dynamic Filtering with jQuery List

I'm attempting to create a dynamic filter list on keypress event. For example, if I type "It" into the input field, the elements that do not match this value will be hidden. I'm unsure if the code structure I have implemented below effectively ac ...

javascriptjqueryhtml

Developing a MySQL Community Server-backed RESTful Web Service with the power of jQuery AJAX

I am currently in the process of developing a RESTful Web Service using MySQL Community Server alongside jQuery AJAX Unfortunately, my usage of jQuery AJAX is not functioning as expected. When attempting to add, delete, update a product, or retrieve all p ...

javascriptjavamysqlajaxspring-boot

AngularJS: intercepting custom 404 errors - handling responses containing URLs

Within my application, I have implemented an interceptor to handle any HTTP response errors. Here is a snippet of how it looks: var response = function(response) { if(response.config.url.indexOf('?page=') > -1) { skipException = true; ...

javascripthtmlangularjs

Tips for dynamically updating the div class based on the model's value

How can I dynamically change the CSS class of a bootstrap element based on a value? I would like to display a div in green if the value is "OK" and red otherwise. If status = "OK", it should look like this: <div class="small-box bg-green">, else < ...

javascriptcssasp.net-mvcbootstrap-4

Using Selenium to continuously scroll to the bottom of the webpage

Selenium: I am new to WebDriverJS. I have experimented with this method in Java. Long repeat = 0l, scrollHeight = 0l, returnHeight = 0l; while(true){ if (repeat == 0) { returnHeight = (Long) jse.executeScript("var scroll =document.documentEle ...

javascriptnode.jsseleniumselenium-webdriver

Dealing with errors in a sequelize ORM query: Tips and tricks

Currently, I am implementing Sequelize ORM in my Node/Express project using Typescript. Within the database, there is a 'users' table with a unique column for 'email'. As part of my development process, I am creating a signIn API and ...

javascriptnode.jsexpresssequelize.jsbackend

Return to iframe in Selenium

I have encountered an issue and I am unsure of where my mistake lies: Thread.sleep(10000); String mainWindow = driver.getWindowHandle(); while(true) { try { wc.until(ExpectedConditions.elementToBeClickable(By.xpath("//*[@cl ...

javaseleniumselenium-webdriver

Learn the process of dynamically adding components with data to a list of objects using React JS

In my current project, I am working with a component list that consists of MUI chips. These chips have specific props such as 'label' and 'callback', which I need to incorporate into the list when an onClick event occurs. Each chip shou ...

javascriptreactjsselectmaterial-uicomponents

In JavaScript with Node.js, how can one verify a file's size and only download the initial kilobyte of the file?

When using Javascript/Node JS to download a file, you can check the file size and download only the first kilobyte of the file. This is useful if you want to hash the first kb and compare it with the hash of the complete file. If the hashes match and the ...

javascriptnode.js

Ways to allow scroll events on top of an overlay without passing click events

My goal is to develop a unique map annotation tool with custom controls, not relying on the built-in features of map providers. Imagine something like this: https://i.sstatic.net/70Yj7.gif I had the idea of placing a canvas over the map for this purpose ...

javascripthtmlcsscanvashtml5-canvas

bootstrap-vue tabs - reveal specific tab content based on URL anchor tag

For my SPA, I am utilizing bootstrap-vue and currently working on a page where nested content needs to be placed within b-tabs. If given a URL with an anchor (e.g. www.mydomain.com/page123#tab-3), the goal is to display the content under Tab 3. Query: Ho ...

javascriptvue.jsbootstrap-4bootstrap-vue

Enhance the styling of elements generated through JavaScript in VueJs with custom CSS

I need help applying CSS to elements that I dynamically created using JavaScript. buttonClicked(event) { console.log(event); let x = event.clientX - event.target.offsetLeft; let y = event.clientY - event.target.offsetTop; let ripples = document.cre ...

javascripthtmlcssvue.jsvuejs2

Events in d3.js are properly registered, however they are not being triggered as

After creating an enter section that transitions to set the opacity to 1, I encountered an issue where the 'click' event on the circle worked but not on the text. Interestingly, when I replaced the 'text' with a 'rect' and se ...

javascriptd3.jsdom-events

What is the best way to extract the inner HTML of a child node in Selenium using Python?

My goal is to iterate through multiple nodes and extract child nodes from the parent nodes. Consider the following structure: <div class="wrapper"> <div class="item"> <div class="item-footer"> ...

pythonseleniumxpath

What steps should be taken to prepare data for transmission to a server in a Next.js environment?

I'm in the process of creating a website that requires authentication. I am using Next (React) and typescript for web development. My objective is to make most pages ServerSideRendered or StaticHTML. However, I encountered an issue right at the begin ...

javascriptreactjstypescriptnext.jsserver-side-rendering

I currently have a form within a div that is part of a loop to showcase saved data. My objective is to identify any changes made in the form fields so I can detect them effectively

This code is located inside a loop <div class="card card-fluid"> @php $counterId++; $formId = 'startLog'.$counterId; @endphp {!! Form::open(['id'=>$formId,'class'=>'ajax-form','method& ...

javascriptphpjquerylaravel

How do you locate elements using text in Selenium with special characters like &#65279?

As a newcomer to test automation, I'm looking for a way to click on a link with only partial text available. I am aware of the find_element_by_partial_link_text method, but there seems to be random words in the code that include &#65279;. This pre ...

pythonhtmlselenium