I'm using browser automation software to run automated UI tests. Our front end site uses Vue and ag-grid. My browser automation software essentially allows us to use typical javascript/jquery selectors to interact w/ the UI automatically.
I'm trying to get our browser automation software to check boxes in an ag-grid checkbox, inside an ag-grid.
I am not a Vue developer, so I was trying the typical things I'd do. Things like:
$('.ag-selection-checkbox').click();
But nothing I do actually clicks and selects to box. Any advice would be greatly appreciated.
UPDATE For those in my situation. I used the ag API like so:
document.querySelector('#myGrid').__vue__
.gridOptions.api.forEachNode((row,index) => {
document.querySelector('#myGrid').__vue__.
gridOptions.api.getRowNode(row.id).selectThisNode(true);
}
)
Try using the class that is directly associated with the checkbox, in this case it would be the class applied to the input element: ag-input-field-input ag-checkbox-input.
You can get the checkbox of the first row like this:
const checkbox = document.querySelector('.ag-center-cols-viewport .ag-row .ag-checkbox-input');
checkbox.click();
Please see this example showcasing a row selection via the DOM based on the button click.
Related
I have been developing a Vue project and something caught my attention today. I used checkboxes with some sytling (I use them as toggle switches) throughout the project and thanks to these elements, I show or hide some elements and components. Toggle elements control specific data within each component. When the data istrue, some elements are displayed on the page and when false, they are hidden. What I noticed today is a little interesting. There is probably a simple solution, but although I have been searching the internet for a while, I haven't found a solution yet.
Here is the thing;
Let's say I am at the About page of my project. I used my toggle switches and now some of my elements and some sub components are displaying in the About.vue. Then I go and visit my Services.vue page and showing and hiding some elements and sub components as well. By the way, almost all of these pages have forms and I save these forms to local storage. When I return to My About page from my Services page, I see that the elements I activated have been restored. In other words, each component welcomes me with its default state when it is returned from another component. What I want to see is, If I go and check some checkboxes to show some element, No matter how long I roam between other routes, I want those elements to remain visible or hidden when I come back. For example, a toggle element must be activated to write a username and password on a component. After activating the toggle element, the user types the username and password and clicks the Save button. Then he continues to browse many areas of the project and when he returns, he sees that the toggle element is inactive and the username and password are not entered. I don't want it to be that way. How do I fix this?
you can use vuex for solved this problem.
https://vuex.vuejs.org/
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension (opens new window)to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
I use Testcafe Studio to write tests.
There is a long drop-down list with elements. The item to select is out of view. Interested in how you can implement its selection without using scrolling (without using the built-in On-Page Actions: Drag). Maybe you can somehow implement it using functions or a script?
Specific task: in this form (https://www.devexpress.com/Support/Center/Question/Create) there is a drop-down list of the "Platform/Category:" field. Using TestCafe Studio, I need to write a test that selects the value "Native" from the list without using horizontal scrolling.
Thanks.
try creating a function like this,
async selectDropDown(dropDownEle, valueToSelect){
await t.click(dropDownEle);
await t.click(await dropDownEle.find('option[title="' + valueToSelect +'"]'));
}
I am having handling a drop down button in EXTJS application which i am trying to automation with selenium web driver.
clicking on the image i will get a list of elements in the form of 's
to click select from
Please help me how i can device a xpath to click this image, which i should not use "id" (as its extjs it might vary every now and then).
if there are any selector i can use for extjs please suggest. Thanks for your help.
<DIV id=ext-gen2337 class=x-form-field-wrap style="WIDTH: 0px"><INPUT id=ext-gen2023 class=" x-form-text x-form-field" style="WIDTH: 297px" readOnly size=24 value="Clients with pending exceptions" name=ext-gen2023 autocomplete="off"><IMG id=ext-gen2338 class="x-form-trigger x-form-arrow-trigger" src="https:REDACTED/com.ssc.epw.gui.EPWHome/clear.cache.gif">
Try below XPath to match required img element:
//input[#value="Clients with pending exceptions"]/following-sibling::img
So if you want to start testing ExtJS app and you don't want to use the best solution for this such as Sencha Test or Bryntum Siesta.
The best way to approach this is to write you own layer between the ExtJS components and the html dom of the site.
You can see more info in my answer here https://stackoverflow.com/a/41718879/1768843
But what you need to do is to use the Ext.Component.Query, with Selenium you can execute the javascript code on the site. So you execute the ext query and you pass there the Ext selector - for example button[text=something] or panel[name=mainPanel] simply any ExtJS component selector. This will return you the ExtJS object and with it you can simply call .getDom() or .getId() which will return you the actual dom or id used in the HTML. Next you can simply use the webdriver functions for clicking (or something) on the HTML elements in the site.
^^ You need to do this because the ExtJS framework can generate the HTML every-time little bit differently. For example you add new container or you upgrade your ExtJS version and the HTML is changed and your test can stop working. But if you call the Ext components as log as the Ext source code is still the same your tests will be always working.
But doing this is quite a hassle and lot of work. It's much better to use prepared solutions such as Sencha Test where everything is already prepare for testing ExtJS apps.
I would do something like this:
driver.findElement(By.xpath("//div[contains(#class, 'x-form-field-wrap')]//img"));
or
driver.findElement(By.xpath("//img[contains(#src, 'https://REDACTED/com.ssc.epw.gui.EPWHome/clear.cache.gif')]"));
After exhaustively searching for this over various forums, I still don't have an answer.
Here are complete details
I'm identifying the element through classname which points to multiple(4) buttons. I'm iterating through buttons and then search for text and when there is a match i click it.
This works fine with selenium webdriver and browsers such as firefox,chrome
Now I'm doing the same thing with appium.
Out of 4 buttons which are identified through classname, the script clicks 2 buttons successfully but for two buttons click happens(i can see the button being clicked) but new page which should be loaded is not loaded. The buttons for which click is not happening are in a footer class and other two are in div class.
Things i have already tried
Actions builder - click(), clickandhold()
Javascript executor
I'm currently trying with touch options, tap and by switching to native view but haven't found any success.
If any has encountered the same, a solution will be appreciated.
I want to avoid xPath because that might change in the page I'm working on, and I want to stress that the script is able to find the button, but is not able to click it properly.
You can filter your locator by using class name and index. Like this:
driver.findElementsByXPath("//*[#class='android.widget.ImageView' and #index='0']");
This xpath won't get change on other devices too.
Could you see: Unable to find an element in Browser of the Android emulator using Appium and C# ?
In case of testing web apps in browser the elements should be located as usual elements on the web page ( not as some classes like android.widget.EditText and android.widget.Button).
Upadting appium java client to 1.5.0 (from 1.3.0) solved the issue. Need to check why!
I am new to test automation and I need help of experts who can help me in proceeding with the current difficulties.
Currently there is a web browser application which is tested manually based on the test cases in an excel.
There is also an automation framework also which uses Selenium and uses WebDriver and runs on Google Chrome.
The test cases(in excel) used for manual are taken up and another set of test cases(in excel) are written which is nothing but the div elements and the action which the framework should do like click or find which the framework will understand.
1.First I need to manually find out each div id for all the elements and put it in excel which the framework understands.How can I avoid this?
2.Also a new version of the application has come in which all the div id for the elements differ.Hence its pain to note the div id again and put them in excel.
How can I write the test cases only once for each case even if the div changes?
Please help.
Follow a design pattern, e.g. Page Objects
If ids will be changed try to use css and xpath selectors that do not stick to ids. The main idea is to specify such selectors that allow tests to find elements on the page using knowledge by their parents, tag names, other attributes that won't change (class and so on).