Exploring elements with Watir WebDriver and ExtJS

Currently, I am performing an acceptance test using watir-webdriver with Ruby. I have a question regarding ExtJs support with Watir webdriver. Is it possible to locate elements that are dynamically generated by ExtJS? I have attempted the following:

@browser = Watir::Browser.new :chrome
# Navigate to the page
@cbo = @browser.execute_script "return Ext.getCmp('cboCategory')"

Unfortunately, this approach did not yield the desired results. Any advice or suggestions would be greatly appreciated. Thank you.

javascriptrubyextjsseleniumwatir

Answer №1

Testing ExtJS pages can be a challenging task, especially when it comes to locating elements.

Here are some valuable tips I recommend:

  • Avoid using dynamically generated IDs such as (:id, 'ext-gen1302')

  • Avoid using absolute or nonsensical XPath, like 

    //div[4]/div[3]/div[4]/div/div/div/span[2]/span

  • Utilize meaningful auto-generated partial IDs and class names for easier identification.

    For instance, in this ExtJS grid example: 

    (:css, '.x-grid-view .x-grid-table')
    could be beneficial. If there are multiple grids, consider indexing them or identifying a common ancestor like 
    (:css, '#something-meaningful .x-grid-view .x-grid-table')
    .

  • Implement descriptive class names within the source code. ExtJS offers cls and tdCls for custom class names, allowing you to define cls:'testing-cmb-category' in your source code and select it with 

    (:css, '.x-panel .testing-cmb-category')
    .

Check out my other answers related to this topic:

  • How to find unique selectors for elements on pages with ExtJS for use with Selenium?
  • How to click on elements in ExtJS using Selenium?
  • Using class names in Watir
  • how to click on checkboxes on a pop-up window which doesn't have name, label

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

What methods can be utilized to avoid displaying a Bootstrap popover intermittently within an AngularJS framework?

When using the bootstrap popover in a custom AngularJS directive, I need to display an error message when the button is disabled by setting $scope.buytypeButton= {type:false}. The error message should be displayed in a popover. On the other hand, when $sco ...

javascriptjqueryangularjstwitter-bootstrapangular-ui-router

What is the best way to ensure that this JavaScript code functions properly when dealing with business operating hours

Using this javascript code allows me to check if a business is open based on its operating hours. It's effective for times like 17:00-23:00, but how can I modify it to work for hours past midnight, such as 0:30 or 1:00 in the morning? var d = new D ...

javascriptangularjsdatetimetime

Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe. After extensive research, it seems like jQuery might be necessary as CSS Flex didn't wor ...

javascriptjqueryhtmlcssiframe

The TestNG Report feature is automatically forwarding the latest report

After implementing a simple code to send an emailable report under the @AfterSuite Annotation, I encountered an issue where it keeps sending the previous report instead of the latest one. I even tried using thread.sleep in the email method but the proble ...

javaseleniumtestng

Determine the difference in time

There are two input types for time: 1. Time of entry. 2. Time of exit. For example: Start: 00:00 End: 01:30 Result: 1.5 Start: 14:00 End: 00:00 Result: 10 An algorithm needs to be created to calculate the number of employees working at a given time. Th ...

javascriptreactjsalgorithm

Developing a Javascript widget feature

I have a concern regarding the functionality of Javascript widgets. The widget I'm working on embeds content onto a page without using iframes, which has been effective so far. However, there are instances where certain user layouts cause the widget t ...

javascriptwidget

Ensuring that an added row remains at the bottom of a table composed of rows generated dynamically by utilizing the .detach() method

I need to ensure that the "subtot" row is always appended as the last row in the table. When dynamically adding rows, the "subtot" row appears as the last row the first time, but does not stay at the bottom when more rows are added. Even though I want the ...

javascriptjqueryhtmlcss

Encountering issues with rendering in React JS when utilizing state variables

I've been attempting to display content using the render method in React JS, but for some reason, the onClick code isn't executing. I'm currently enrolled in a course on Udemy that covers this topic. import React, { Component } from 'r ...

javascriptreactjs

Taking a picture on an Android device using keyevent

Currently, I am attempting to utilize the following code in order to capture and save an image. However, when running the code, this specific part seems to be getting ignored: ((AndroidDriver<?>) getDriver()).pressKeyCode(AndroidKeyCode.KEYCODE_CAME ...

seleniumappium

best way to eliminate empty p tags and non-breaking spaces from html code in react-native

How can I clean up dynamic HTML content by removing empty <p> tags and &nbsp? The whitespace they create is unwanted and I want to get rid of it. Here's the HTML content retrieved from an API response. I'm using the react-native-render ...

javascriptreactjsreact-nativeexporeact-native-render-html

Are Bootstrap Input groups inconsistent?

Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...

javascripthtmlcsstwitter-bootstrap

Steps for implementing AJAX to display a success function and update database results in real-time

I'm struggling with allowing my AJAX call to send data to my PHP file and update the page without a reload. I need the success message to display after approving a user, but their name doesn't move on the page until I refresh. The goal is to app ...

javascriptphpajaxforms

What is the reasoning behind npm modules such as material-ui exporting both es6 and es5 files?

When installing several npm modules, such as @material-ui/core, I noticed that there are three different ways to import the same React component: import { AppBar } from '@material-ui/core' import AppBar from '@material-ui/core/AppBar/AppBar ...

javascriptmaterial-ui

What does the cb parameter represent when null in the context of multer?

Why do the cb functions in the code snippet below from the multer API take null as their first argument? What are the implications of using null in this context, and what alternative values could be passed besides null? var storage = multer.diskStorage( ...

javascriptnode.jsexpressmulter

Toggle the hamburger menu using JavaScript

How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS. I only have the HTML and CSS for this: HTML in index.html file ...

javascriptjqueryhtmlcss

The Loading Screen Is Lagging

I hope I'm not overwhelming you with too much (or too little!) information. It's a bit tricky for me to share code when it spans multiple files like this. So, in my small project, I have my app.js server using express and ejs. There's a &qu ...

javascriptnode.jsexpressejs

Ways to make WebDriverWait search for a specific numerical value

I created an Auction monitor using selenium that has been working flawlessly since its inception. The concept is simple - it goes to a Property Auction site and keeps an eye on the auction's price, sending me a text notification if there are any chang ...

pythonpython-3.xseleniumselenium-webdriver

Convert millimeters to inches with a unique AngularJS filter that activates on click

I am currently working on a UI that requires users to enter dimensions for width and height. Within the UI, there are 2 buttons available - one for 'mm' and the other for 'inches'. When either of these buttons is pressed, the active cl ...

javascriptangularjsconvertersangular-filters

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in $('td:contains("text")').css('color','red') after an Ajax load script? Here is the main code snippet <div id="datatable"></div> <script src="https://code.jquery.com/j ...

javascriptjquerycss

Spinning an object using JQuery

I am currently working on a project to test my skills. I have set up a menu and now I want to customize it by rotating the icon consisting of three vertical lines by 90 degrees every time a user clicks on it. This icon is only visible on smartphones when t ...

javascriptjqueryhtmlcssweb