Selenium IDE is unable to locate the column header menu in Ext JS

I have recently adopted Ext JS for my frontend development, and I have a grid with columns that feature menus on their headers (implemented as per standard).

The header menu is designed to toggle filters for the store based on the input values.

Since I've started using Selenium to automate some frontend testing tasks, I encountered an issue where Selenium cannot detect the click action on the column header menu...

I came across information online suggesting that unique IDs need to be specified for components to prevent Ext JS from generating dynamic IDs. While I assigned an ID to the gridcolumn xtype, it seems this did not extend to the header menu (or the button that triggers its display).

Could someone assist me in assigning a unique ID to the button that displays the menu window, or offer any insights on how to make Selenium locate the header menu successfully?

Ext JS column header menu

javascriptseleniumextjs

Answer №1

Big shoutout to @JimGrigoryan for the fantastic tip! By transitioning to Kantu's selenium in desktop mode and leveraging XClick, XMove, and XMoveRelative commands, I successfully located elements on the page through screenshots. Dynamic IDs assigned by Ext Js are no longer a hindrance.

Answer №2

Give this a try!

Note: Remember to make slight adjustments in the code below based on your own requirements.

//locate the header
WebElement header = findElement(By.xpath("//div[starts-with(.,'Specification Status')]"));

//Hover the mouse over the header to display the arrow
Actions action = new Actions(driver);
action.moveToElement(header).perform();

//click on the arrow
header.findElement(By.cssSelector(".x-column-header-trigger")).click();

//Hover the mouse over the filter item, this element is not directly linked to the header
//element not found in the DOM.
WebElement filters = findElement(By.cssSelector("a[aria-label='Filters']"));
action.moveToElement(filters).perform();

//find input fields, these elements are not directly linked to the header
List<WebElement> searchFields = findElements(By.cssSelector("input[placeholder='Enter Filter Text...']"));

WebElement searchId = searchFields.get(0); //<<< Modify this based on the number of input fields in your filters
action.moveToElement(searchId).perform();
searchId.sendKeys("Value to search");

Thread.sleep(1500);

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

Error: Required variable missing in AJAX Post request

When making an ajax call, I use the following code: o.open("POST",q,true); o.setRequestHeader("Content-type","application/x-www-form-urlencoded"); o.setRequestHeader("Content-length",p.length); o.setRequestHeader("Connection","close"); Here, q represent ...

javascriptajax

Selenium webdriver unable to locate an empty element

I'm currently trying to find a specific element using selenium webdriver: <div class="lv-product__details"><div class="lv-product__details-head"><span class="lv-product__details-sku"> M40712 ...

pythonhtmlseleniumweb-scraping

Issue with Ajax load function not functioning properly on Internet Explorer 8

My ajax load function is working in Chrome, Safari, Opera, and Firefox but it's not working in Internet Explorer 8. (using jQuery version "jquery-1.11.2") This is my JavaScript code: function solFrame(islem, sayfa) { if (sayfa == '') { ...

javascriptphpjqueryajaxinternet-explorer-8

Understanding the process of reading cookies on the Angular2 side that have been set by the C# server

I'm struggling to understand how the angular code can access the cookie that was set on the server side. I found the following code snippet on GitHub. This C# function sets the cookie in the Response object with the last line of code. My question is, ...

javascriptc#angular

When I use `myState` in `Console.log`, the entire array is displayed. However, when I use `myState

As a novice in the realm of React, I am currently working on an Attendance-System Project and grappling with some messy code, my apologies in advance. Within this project, there exists a component named ShowData which receives certain props from its paren ...

javascriptreactjs

Can the Three.js Orbit Controls be customized to modify their appearance?

While I appreciate the orbit controls that come with Three.js, I am wondering if there is a way to customize them to follow the path of an ellipse (or technically an ellipsoid) instead of a circle. My main goal is to move the camera in an ellipse using th ...

javascriptthree.jscamera

I have added the same directive to both of my HTML files

Hello, I am facing an issue with a directive that I have included in two HTML files. The 'app' is set as ng-app. <dir auto=""></div> The code for the directive is as follows: app.directive("auto", function() { scope: { arr : ...

javascriptangularjsangularjs-directiveangular-ui

Guide to Binding a JSON Property (Set or Array) to an Interactive Input Form in AngularJS

My input form is structured like this: <div> <div class="form-group"> <label for="inputQuestion" class="col-sm-2 control-label">Question</label> <div class="col-sm-10"> <input data-ng-model="publication.qu ...

javascriptangularjsdata-bindingangularjs-ng-model

Activate and deactivate form fields on Safari

I have been working on a script to enable and disable a field using Javascript. It functions correctly in Internet Explorer, but I am encountering issues with Safari. FIELD If "Yes" is selected, the free text field below should be enabled; otherwise, it s ...

javascriptsafari

Struggling with Three.js raycasting issues

My mesh is positioned at the origin. var textureCanvas = new THREE.CanvasTexture( imageCanvas ); textureCanvas.repeat.set( 4, 4 ); textureCanvas.wrapS = THREE.RepeatWrapping; textureCanvas.wrapT = THREE.RepeatWrapping; var materialCanvas = new THREE.Mesh ...

javascriptthree.js

Implement multiple selection of parameters in React Material UI version 1.0 and handle the onChange

Currently, I am working on implementing React Material UI 1.0.0-beta.34 and encountering an issue with the Select component. My challenge lies in trying to include an extra parameter in the onChange event handler, yet it seems that only the event parameter ...

javascriptreactjsreduxmaterial-ui

What are some ways to change how requests are handled?

Can request handling in Scrapy be customized to use Selenium for specific URLs instead of the standard machinery? What is the process for achieving this? ...

pythonseleniumweb-scrapingscrapy

Enhancing your nav-tabs with Bootstrap: adding links to your navigation

Here is the HTML code I am working with: <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls ...

javascripthtmljquerybootstrap-4

Using jQuery combogrid to automatically target and populate input box upon row selection

I have implemented combogrid functionality from https://github.com/powderblue/jquery-combogrid to display suggestions while typing. $(".stresses").combogrid({ url: '/index/stresssearch', debug: true, colModel: [{'col ...

javascriptjquery

Issue with automatic form submission

What is the best way to automatically submit my form once the timer runs out and also when the refresh button is clicked? I have encountered an issue where every time I try to refresh the page, it prompts for user confirmation. If I click cancel, it stay ...

phpjavascript

Is it possible to dynamically store JavaScript code in a variable and then have JavaScript execute it?

I'm uncertain if my current method is the most appropriate for my goal. Essentially, I am fetching data from a database using an ajax call, and I want this data to populate a JavaScript library where the layout is structured like this: data[ item{ ...

javascripthtmljquery

What are the steps to increase or decrease the quantity of a product?

Is there a way to adjust the quantity of products in the shopping cart? I would like to be able to increase and decrease the quantity, while also displaying the current value in a span tag. <a href="javascript:" id="minus2" onclick="decrementValue()" ...

javascriptphpajax

Exploring Next JS: Effectively altering SVG attributes and incorporating new elements

I have integrated SVGR to load an SVG as a component in my latest Next.js 13 application: import CvSvg from './../../public/image.svg' export default function Home() { return ( <div className="flex flex-col min-h-screen" ...

javascriptnode.jstypescriptsvgnext.js

axios GET and POST requests are not functioning properly, while fetch requests are successful

I recently set up a REST API on Heroku using Express, NodeJS, and MongoDB (mogoose as orm and MongoDB Atlas as well). I am diving into the world of MERN stack development as a beginner ...

javascriptajaxaxiosfetch-api

Dealing with the 'routes not found' error in a Node.js Express application (troubleshooting)

Attempting to address potential missing router errors in my app.js or router file has been a challenge for me. (various solutions found on Stack Overflow have not provided the correct resolution) The current state of my app.js or router files is functiona ...

javascriptnode.jsexpress