After migrating from Vaadin 8 to 14, browsers do not remember password. With some googling, the below link gives a solution, but I don't understand exactly what I need to do.
https://vaadin.com/forum/thread/17399734/leverage-browser-save-password-feature
Jouni Koivuviita said:
Vaadin input field components have a feature that allows you
to slot in a native input element, and thereby allow password managers to work (assuming you
do not have any other shadow roots in your DOM in the hierarchy above the input field).
<vaadin-text-field>
<input type="text" slot="input">
</vaadin-text-field>
How is this solution implemented in Java exactly ?
Thanks for help.
There are two "easy" solutions:
Use the built-in login component that handles this automatically
Upgrade to Vaadin 23 where the text field workaround is no longer needed
For the difficult solution, you need to use some low-level APIs to make the Java part of Flow replicate the HTML example that you quoted. It goes something like this:
TextField field = new TextField();
Element input = new Element("input");
input.setAttribute("slot", "input");
field.getElement().appendChild(input);
Related
I'm trying to use OpenTest with web applications created with IBM EGL using the Dojo toolkit. The issue with dojo is that it dynamically generates id's every time so they cannot be used as a locator. In addition many elements do not have an xpath so that can't be used either.
It seems like this is a common issue when I search for "dojo" and "selenium" but I haven't found any solutions yet.
Other testing tools have "explicit" support for specific frameworks (e.g. like dojo) so I assume it's technically feasible.
Here is an excerpt from a website where this same question was asked and OpenTest supports building out macros that do just what this indvidual was able to do with .NET code. Please reference the blockquote below as well as the source
I use Selenium to Test my web application which is built by dojo/dijit
and asp.net MVC, so far it works fine.
I've faced the same issues with yours before. My way is "don't think
about dojo widgets" when writing steps interacting with them. Treat
them as normal complex html elements. You need to browse your dom tree
on the client after dojo parse your widgets, locate the real dom
element which dijit's value node or interactive part corresponding to
and do thing (Click, SendKey or GetId in your case) to it.
It is also good to wrap some common actions to widgets into Helpers
which can be reused in your project.
Below is a simple .NET example I use to test whether a button exist in
a dGrid, I just use css selector to find the cell, hope it helps:
[Then("I can delete it at row '(.*)'")]
public void Then_I_can_delete_it_at_row(int rowIndex)
{
var nthRow = Browser.FindElementsChecked(By.CssSelector(".dgrid-content .dgrid-row-table")).ElementAt(rowIndex - 1);
var deleteBtnsInRow = nthRow.FindElementsChecked(By.XPath(".//span[text() = 'Delete']"));
Assert.AreEqual(1, deleteBtnsInRow.Count);
}
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')]"));
I am an Automation Engineer, I am currently trying to create test cases for a webpage that are sustainable ( that I can run at a later time and have still pass)
Here is my problem:
I am trying to select multiple web buttons that have the same exact class name. Now I can 'select' these buttons but these are only temporary x paths that are subject to change.
I need UNIQUE ID's (or some way of distinguishing them) for the same web elements. The only difference in the x paths are:
HTML format code that I can find each button, however if one button is moved my tests will fail.
HTML code that is the class name + nth of the button. But again my tests will fail if a button is taken out of the webpage.
//*[#id="tenant-details-accordion"]/div[1]/div[2]/div/div[2]/div[1]/div/a/div
//*[#id="tenant-details-accordion"]/div[1]/div[2]/div/div[2]/div[2]/div/a/div
//*[#id="tenant-details-accordion"]/div[1]/div[2]/div/div[2]/div[3]/div/a/div
^^The above code is how I currently find each button with Selenium
If I copy each classes x path this is what I get
<div class="src-js-components-DateControl-___DateControl__dateControl___2nYAL"><a tabindex="0"><div class="src-js-components-DateControl-___DateControl__icon___2z6Ak null"></div><!-- react-text: 392 -->Set +<!-- /react-text --></a></div>
<div class="src-js-components-DateControl-___DateControl__dateControl___2nYAL"><a tabindex="0"><div class="src-js-components-DateControl-___DateControl__icon___2z6Ak null"></div><!-- react-text: 386 -->Set +<!-- /react-text --></a></div>
<div class="src-js-components-DateControl-___DateControl__dateControl___2nYAL"><a tabindex="0"><div class="src-js-components-DateControl-___DateControl__icon___2z6Ak null"></div><!-- react-text: 398 -->Set +<!-- /react-text --></a></div>
I have talked to the Development team about this issue however they tell me that assigning Unique ID's to these web elements is a big no-no. (something to do with globalization of the project when we go to production) Even if they did assign Unique Id's they tell me that they would have to strip them before the project can be sent to production. Which ultimately would render my tests useless in the end...
I now come to Stack Overflow for help, everything I look up online cannot give me an answer, however this does seem to be a valid question between QA and Development departments.
Is there a way to assign Id's to a web element so that a tester using selenium can identify them and yet it will not affect a Developers ability to use that element through an entire project?
Edit:
With the framework that my company uses, I am not actually writing any code in selenium. I save the Xpath to an object and then later in a manual test call that object with a pre-existing method. I can ONLY select Xpaths to be saved in an object.
I'll talk to Dev later to have them explain the big 'no-no' so that I may be able to communicate that with all of you..Thank you for your time and input
For example:
BirthDateSet= someXpath
Click() using {BirthDateSet}
Here are some pictures to help give you a visual
You can simplify your XPathto make it less sensitive to possible changes in DOM:
//div[#class="src-js-components-DateControl-___DateControl__icon___2z6Ak null"][N] # Where N is button index
If this part 2z6Ak of class name is dinamically generated, try:
//div[starts-with(#class, "src-js-components-DateControl-___DateControl__icon___")][N] # Where N is button index
Another way of reaching to the required button using xpath is following:
//*[#id='tenant-details-accordion']/descendant::div[contains(#class, 'DateControl__icon')][1]
Above xpath should be able to select the first occurring button. Similarly, for the second occurring button, the xpath will become:
//*[#id='tenant-details-accordion']/descendant::div[contains(#class, 'DateControl__icon')][2]
Hence, you can continue to replace the predicate([2]) based on occurrence level of the required button on page.
you can ask devs to add attribute to those buttons
so instead of:
<button class="common_class_name">
<button class="common_class_name">
<button class="common_class_name">
for each button you will see
<button class="common_class_name" test-id="uniqueAttributeForButton1">
<button class="common_class_name" test-id="uniqueAttributeForButton2">
<button class="common_class_name" test-id="uniqueAttributeForButton3">
etc
And in your tests you can find those buttons using css selector
e.g. C# code:
var buttonLocator = "[test-id=\"uniqueAttributeForButton1\"]";
WebElement button = driver.FindElement(By.CssSelector(buttonLocator));
if devs doesnt want to add unique IDs or attributes (it's weird why they don't want to do that) you could try something like this:
//return div class 'col-sm-4' which contain text 'Activation Date'
var parentDiv = driver.FindElement(By.XPath("//div[contains(#class, 'col-sm-4') and contains(., 'Activation Date')]"));
//should return div with icon you want e.g. Click
var childElement = parentDiv.FindElement(By.CssSelector(".DateControl__icon"));
childElement.Click();
You can go with the nth approach to find your unique element or with another, that won't solve your real problem which is that your colleague developers aren't cooperating with you. The automated tests are supposed to be (among other things) a service for the developers to know they haven't broken anything as fast as possible, but if they aren't giving any effort, then WHY should you invest in it at all..?
They probably won't even look at the results. Especially when your locators are in the form of div[2]/div[3]... which would break very often and you'll lose their trust in the automation.
I'm no front-end expert but I've seen enterprise products in production with G10N and L10N and other long words, that have id's in their HTML, so if I were you I'd dig deeper to understand why? that big no-no, which sounds very odd to me...
So you asked the wrong question, it should be something like ~ How to add unique id's to the HTML using React in a global web application? and the ones who should be asking it are the developers.
As a side note, as many people tend to think, automation is not mainly about moving manual tests to automated it also finds "bugs" in the communication inside the company. To quote a great blog post on this subject:
Counter-intuitively, the bigger obstacles when developing automation
are either low priority bugs or even things that are not bugs
whatsoever. These obstacles can be symptoms of a bad design, bad
development practices and even symptoms of inefficient communication
patterns in the organization (that are usually caused by the
organizational structure! Conway’s law is a classic example for this).
Good luck!
EDIT:
Thanks for the code.. So if you look at your code, you can see that although what you're after have similar attributes, there are elements in the page that would allow you to identify what you're after. So let's say you want the SET link after Birth Date, then use:
//div[contains(text(),'Birth Date')]/div/a/div
So to reuse this xpath, just replace the text String.format("//div[contains(text(),'%s')]/div/a/div", labelName);
OLD: if you want to temporarily assign the elements an attribute, I believe you can do that through javascript element.setAttribute() which you can run through the executeScript() function.
Don't the buttons have text? Are you saying that the buttons swap places with one another? or don't you want to use the index of the buttons?
I understand you want to select the "Set +" buttons, correct?
If so you can try to find all buttons under the #id="tenant-details-accordion" element with a specific text like that:
//*[#id="tenant-details-accordion"]//*[text()='Set +']
We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)
Protractor 1.7.0 has introduced a new feature: a new locator by.deepCss which helps to find elements within a shadow DOM.
Which use cases does it cover? When would you want to reach elements in the shadow DOM?
The reason I ask the question is that I'm missing on the motivational part of the matter - I thought about protractor mainly as a high-level framework that helps to mimic real user interactions. Accessing shadow trees sounds like a very deep down technical thing and why would you want to do it is confusing me.
To answer your question, here's a related question: "what information does shadow dom provide that looking at raw html does not?"
The following snippet creates a shadom dom (view via chrome or firefox):
<input type="date">
If you click on the arrow, a pop up opens with all the dates, and you can select it.
Now imagine you are building a hotel reservation app and you made a custom shadow dom date picker, where it would black out (and not allow user to select) dates when rooms are unavailable.
Looking at the raw html, you see <input type="date">, and the value/dates that a user selected. However, how would you test that the black out UI is working as intended? For that you would need to examine the shadow dom, where the pop up resides.
The reason I ask the question is that I'm missing on the motivational part of the matter - I thought about protractor mainly as a high-level framework that helps to mimic real user interactions. Accessing shadow trees sounds like a very deep down technical thing and why would you want to do it is confusing me.
Doesn't seem so in this website that shows an introduction to shadow DOM. It says that:
Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression.
Shadow DOM mainly helps with separating content to avoid naming conflicts and improving your code expression, making it neater and better (I assume). I am sorry to say that I don't actually use Selenium, so here is a website with plenty more information: http://webcomponents.org/polyfills/shadow-dom/
I hope this helps you!