Adding id attribute on Buefy table - buefy

I cannot find a way to set id attribute on Buefy table (b-table element). It makes automated tests for my application very fragile when there is no possibility to identify elements by id.

Related

Unit Tests - Unable to create component with mat-autocomplete

I have a reactive form component that is built on 2 mat-autocomplete form control fields and a submit.
Basically, you search a keyword, and autocomplete functionality of the angular material (ng9) lists down a list of matching entries before you can select one.
Once you have selected you click the form group submits. The implementation is working fine, I have been trying hard to write unit tests for this component, however, I am unable to access fields because TestBed is unable to mock the component even with all the injected dependencies.
I have imported mat-AutoCompleteModule in the TestBed configurations before each. I honestly have not found any relevant links that I can refer to. I have a similar reactive form with two form control fields unit tested properly, the only difference here is that I am using Mat-Autocomplete in this form

Automation of test case independent of ui changes

We are automating test cases for hardware devices like tv, raspberrypi etc which require to perform certain number of steps and check expected result at the end of each step. To automate these test cases we are using dom element attributes such as id, class,data-component-id etc to fetch the objects and perform actions.
The problem with this way of automation is every time UI changes we need to change the dom elements id, class etc and hence it is rework of the scripts.
I want to know if there is automation framework or any other way using which we can automate test cases independent of ui changes.
Instead of using the exact path, try to identify the element in a more generic way. Using "contains" will help you to identify the elements with the text attributes with out going into the way it is defined. So even the DOM structure changes but with the text being same, your tests will not fail.
Contains
It is very handy XPath Selenium locator and sometimes it saves the life of a test automation engineer. When an attribute of an element is dynamic, then you can use contains() for the constant part of the web element but also you can use contains() in any condition when you need.
Syntax: //tag[contains(#attribute, ‘value‘)]
Example: //input[contains(#id, ‘er-messa’)]
Examples:
Java
1
2
3
4
5
6
7
8
//*[contains(#name,'btnClk')]
--> It searches "btnClk" for all name attributes in the DOM.
//*[contains(text(),'here')]
--> It searches the text "here" in the DOM.
//*[contains(#href,'swtestacademy.com')]
--> It searches "swtestacademy.com" link in the DOM.
That's why you should use id selectors if possible. They are supposed to be unique and hence immune to UI changes. The name selector should work the same way.
If you are using Selenium, use the following list of object locators in (loosely) this order of preference:
id
name
tag name
class
CSS or Xpath
linktext or partial linktext
And if you really want the elements to be consistently identifiable, you might talk to the developers and ask them nicely to add the ids.

jQuery Datatable: filtering + dynamic changes in table DOM

I'm creating a dataTable by adding the data to a table in the DOM, and then initialize the dataTable when the data is ready.
I'm using filtering, by adding custom hidden spans with keywords in the table, which works fine. However when I dynamically change the table's DOM with JavaScript to change the added keywords, the filter still uses the keywords that where in the table's DOM at the initialization.
I'm looking for a way to somehow "refresh" the table so that the filters will use the new keywords that has replaced the old in the DOM. Any ideas?

How to find XPath of an ExtJS element with dynamic ID

All the elements in the application which i am testing have dynanic ID's . The test always passes when i replay it without refreshing the page but as soon as i refresh the page, The Test Fails because Id's of all the elements changes randomly and selenium cannot match the recorded id's with the new ones .
I tried to use Xpath-position, It works for some objects but in case of Dropdown list and Buttons, it dosent work!
Can anyone please tell me how to find the Xpath (Meathods in JAVA or S*elence*) of an object OR How to create a new Locator Finder for Dropdown list and Buttons
I can show the properties (Inspected by Firebug) of the dropdown which is teasing me.
properties of Dropdown :
<div id="ext-gen1345" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
properties of Dropdown*Choice*:
<ul>
<li class="x-boundlist-item" role="option">Rescue</li>
</ul>
Please search before posting, I have been answering this over and over.
ExtJS pages are hard to test, especially on finding elements.
Here are some of the tips I consider useful:
Don't ever use dynamically generated IDs. like (:id, 'ext-gen1345')
Don't ever use absolute/meaningless XPath, like //*[#class='someclass']/li/ul/li[2]/ul/li[2]/table/tbody/tr/td[2]/div
Take advantage of meaningful auto-generated partial ids and class names. (So you need show more HTML in your example, as I can make suggestions.)
For example, this ExtJS grid example: (:css, '.x-grid-view .x-grid-table') would be handy. If there are multiple of grids, try index them or locate the identifiable ancestor, like (:css, '#something-meaningful .x-grid-view .x-grid-table'). In your case, (:css, '#something-meaningful .x-form-arrow-trigger')
Take advantage of button's text.
For example, this ExtJS example: you can use XPath .//li[contains(#class, 'x-boundlist-item') and text()='Rescue']. However, this method is not suitable for CSS Selector or multi-language applications.
The best way to test is to create meaningful class names in the source code. If you don't have the access to the source code, please talk to your manager, using Selenium against ExtJS application should really be a developer's job. ExtJS provides cls and tdCls for custom class names, so you can add cls:'testing-btn-foo' in your source code, and Selenium can get it by (:css, '.x-panel .testing-btn-foo').
Other answers I made on this topic:
How to find ExtJS elements with dynamic id
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
I would suggest you build a xpath from any of the parent of your DIV. you may get messed if there is no immediate parent node has such one.
example,
//*[#id='parentof div']/div
//*[#class='grand parent of div']/div/div
i did even something like this,
//*[#class='someclass']/li/ul/li[2]/ul/li[2]/table/tbody/tr/td[2]/div
But still, its not encouraged to do so.

many buttons with the same id

I am using selenium to test a page with multiple portlets made by liferay.
Every portlet is having a save button with the same id, it use the iframe id of the portlet to differentiate between the buttons.
How can I write a code in selenium that can understand which button I mean??
You need to use driver.switchTo().frame(IFrameElement). Any kind of IFrame you need to switch in/out of.
https://stackoverflow.com/a/9943605/1769273
You can use xpath or css selectors to find children dependent on parents.
paste your html and we can provide examples
Does this mean your portlets are all embedding iframes? Typically portlets just render HTML snippets into the same documents. In this case, your implementation would be considered flawed: Portlets must not use IDs that can conflict. E.g. you should not render
<input type="submit" id="save"/>
but
<input type="submit" id="<portlet:namespace/>save"/>
or similar - make sure the id is unique, as it ends up in the same HTML-DOM which - by specification - assumes ids are unique.
There are other methods to create unique ids, but keep in mind: If you come up with the prefix yourself, per portlet, someone might add the same portlet to the page twice and you can end up with the same id even though all different portlets have unique ids.
If you are indeed rendering many different iframes from your portlets, you can disregard this answer or take it as a suggestion to make better use of the portal environment by changing the implementation.