Is there any UI automation framework(like Selenium or Potractor) for web sites built using google's Polymer?
Well, I haven't tried but Selenium (maybe Protractor too) should work fine. After all Web Components is just DOM. With Shadow DOM however you'd need to prefix selectors with body /deep/. And I don't think XPaths will work.
And, there's also Web Component Tester although that's something different, not used to test entire pages AFAICT
Selenium does work with Polymer. However, there are some challenges with finding/working with elements within shadow doms. It seems that most buttons are exposed as are text fields. The challenge that I have run into and am still working on is testing date pickers, drop downs and lists. These element seem to be obfuscated behind a shadow dom or something similar, but the /deep/ method doesn't work to access them.
Selenium works with polymer. I tried finding solution online but failed. Experimented and found a way which helped my testers to completely automate our application built on polymer (E-E) with Selenium.Icludes ircular picker, dropdown, tabs, lists, buttons, links, time picker and other functionalities that are custom built but were possible over time.
Related
I am starting to build my own website using the Django framework. It has become apparent that in order to make quick progress I will have to use some form of external library to handle most of my HTML/CSS/Javascript, for example, https://materializecss.com
I have begun investigating different websites to see what works and what doesn't and I was wondering if there is a quick way to identify what UI library a particular website is using.
Chrome's 'inspect' tool doesn't really help me because I get lost with so much HTML.
For example, this website https://www.moneyunder30.com/category/banking apparently uses https://materializecss.com, is there a general place hidden deep in the HTML where I could look to find this information?
Thanks
There's a pretty cool Chrome extension called Wappalyzer
I need to navigate through a menu and select a submenu.
I'm using click element xpath as below:
//*[#id="gomenu68e1884541"]//nav/div/ul/li[3]/div/ul/li[2]/a
But it does not help me because the id is dynamic and changes every time, When I access the application
How can I navigate a menu-> submenu?
For more details on this, refer below mentioned image.
Can anyone help?
I've finally got it to work (even on the third level of the menu) using these commands:
Wait Until Page Contains Element
Sleep
Mouse Over
Click Link
And a mix of different xpath:
xpath=//*[#class="dropdown"]//a[contains(., 'Alumnos')]
xpath=//*[#class="dropdown"]/li[3]/div/ul/li[1]/div/ul/li[1]/a
Thanks everyone for your help
I have had the same issue with Xpath. js, vagy angular etc. based websites which are generates the content dinamically simply not works. I have spent a lot of time on my previous automation project, to find a sulution for this: building own xpath. Means not just Insect Element in Chrome and other browsers, you have to build them by yourself, while learning how the code and website works. This the the method you should follow:
get familiar with the front-end client's code
learn xpath
build your own xpath
You have to find out how you can reach the wanted element, without using #ids. Use css classes which are rarely changing that randomly, and find out the relations between your element. You have to use the following-sibling and text() and other less famous xpath selectors. I would suggest to you this
to get familiar with xpath. There wasn't any other way for me, but in the end I had an amazing, well formatted variable files, contains all the element's xpaths.
I am going to port our windows-based Customer Management software to Web-based. I find polymer may be a choice.
However, for our usage, we can't find polymer component has table-view, drop-down menu(aka. the "select" element in html), date-picker, tree list.
Will polymer add these components later? Or these components will not be the target?
Thanks,
Barry
Polymer is just primarily a polyfill library that helps enabling HTML 5 Web Components in browsers that don't support them by themselves.
Web Components can be written by any developer, so you might need to develop some controls on your own especially the table view one. I'd guess you'll find most of the others mentioned in your question implemented one way or another. You should check out some of the WebComponents collection pages:
http://customelements.io/
http://component.kitchen/
http://bower.io/search/?q=web-components
For your table view control: I had a similar problem couple of years ago and had to implement my own solution. Maybe you can find a regular HTML library that supports table views and make it a (Polymer) Web Component by yourself.
Firefox extensions made in XUL had a nice Tab element. But with Jetpack, I see nothing that would allow me to make tabbed content in a panel module, for example.
I understand that Jetpack uses jQuery. Would the proper way to create tabs be to include jQuery UI or is there some other approach?
Yes, the Addon SDK encourages using standard web technologies instead of XUL, so the appropriate way is to use any JS framework; jQuery UI should be fine too.
I'm wondering if there are any good non-native form inputs for web development? I am currently using the built in <input> controls. They work just fine, but for my application they are too big (especially on OS X). I am wondering if there are any libraries that I can drop in as replacements.
I am especially interested in ones that:
Are a close to native control behavior as possible. Support for tabbing, highlighting current textbox, pressing up/down in <select>, etc.
Have something that replicates <select>
Look good and are compact
I am aware that you can use CSS for some styling, but it's pretty minimal and looks different depending on the browser.
Thanks for your help.
These two from Codrops give the native selects "display: none", then add an overlay that can be styled/modified.
Pretty simple, you just need to call the plugin on your select box.
Demos
http://tympanus.net/Development/SelectInspiration/index3.html
http://tympanus.net/Development/SimpleDropDownEffects/
HTML is not modular like that. Importantingly, you're also restricted by the browser support. The only ways to customize the look'n'feel of HTML are CSS and Javascript. There are crossbrowser CSS/JS based UI frameworks available like jQuery UI and several CSS based form solutions with the goal to have the same look'n'feel among the (most) browsers.
You can also consider to develop an Rich Internet Application (RIA) using one of Flex, Air, JavaFX, Silverlight, etc. This way it looks exactly the same in every webbrowser, but that requires at least an additional plugin which the client may have to install first.
http://plugins.jquery.com/project/jNice
http://www.whitespace-creative.com/jquery/jNice/
You may want to customize the images, sizes and CSS with your own.
You could try creating the controls with Flex/Flash and using JavaScript to retrieve the values.
This would allow you to customize the control as much as you wanted while still staying compatible with most users/browsers.