I'm testing an application written in .NET Backend and AngularJS front end.
Writing some automation tests using Selenium with specflow integration (C#).
I have done the initial setup but one of the biggest difficulties I face is detecting the dynamic web elements. Since the app is using Angular I can't easily identify most elements unless I try to use XPath. Selenium doesn't support the compound class names ie "class="ng-pristine ng-valid ng-touched"" and the IDs keep changing.
Is there a better way of doing this ? or a library I can use to make my life easier ?
Any input appreciated :)
For testing AngularJS application I'll recommend you to use Protractor. Which is an end-to-end test framework for AngularJS applications. The problem you are facing is very common when you are using any automation tool to automate Angular application and that's why Google has came up with Protractor.
For compound class use:
driver.findElement(By.cssSelector(".ng-pristine.ng-valid.ng-touched");
I agree with Shubhasmit Gupta. Only problem that the original Protractor is JavaScript based and it might be challenge start to use it. I would recommend to use Protractor.NET , also it will allow you to use SpecFlow with it.
Main benefits of Protractor that it allows to use specific angular locators: NgBy.Model, NgBy.Repeater, NgBy.Binding etc. and provides good synchronization mechanism.
And because Protractor is a wrapper around selenium, you can use all Selenium functions.
Shubhasmit Gupta is right about using Protractor for AngularJS apps.
But if you are not ready to go down that road, what's wrong with using xpath?
Using your example you can easily identify your objects with the class parameter like this, if you're sure, that there won't be any more dynamically loaded classes:
//*[#class='ng-pristine ng-valid ng-touched']
Or like this, if there is a probability that more classes could be loaded on that element dynamically:
//*[contains(#class='ng-pristine ng-valid ng-touched')]
Or, if even the order of your classes could change:
//*[contains(#class='ng-pristine') and contains(#class='ng-valid') and contains(#class='ng-touched')]
Of course this approach assumes that your element could be identified uniquely by this combination of class attributes or that you are searching for a group of objects or that you will use other attributes to make the identification unique.
AND Shubhasmit Guptas approach using cssSelector is generally regarded as the faster more precise approach IF you are able to identify an object just by this combination of classes. xpath is favored if you need potentially more attributes than just the class.
Related
My task is migrate incrementally from AngularJS to Vue3. The idea is to start using Vue components in some places, rotes, server requests.
Is someone has success story using Vue3 components/routing in AngularJS project?
I've spent few days trying make it work, but in internet there is no example about it. Only Vue2/AngularIO, Vue3/AngularIO, Vue2/AngularJS, etc.
Not sure what more information I need to provide.
Thanks in advance!
I think one good way to achieve such a complex migration would be to borrow some principles from the microfrontend architecture principle.
Just divide your application in big components, that you would like to convert one by one.
Take a big component of your application, rewrite it in VueJS, and make it communicate to the rest of your application using custom events.
That will allow you to work incrementally, without using any additional component or library to make the transition.
Just be sure to define clearly the boundaries between your different components, and don't try to apply this approach to very small components (as there will be some overhead involved by adding this event communication).
I would like to start automating the testing of my app written in CodenameOne, but I find it difficult to visualize how to use the TestRecorder (section "Unit Testing") for "industrial" testing.
If anyone here is already using it, could you share a few tips about how you use it?
E.g. how do you use the different "Asserts" buttons, how do you structure your tests into suites and how do you chain them together (e.g. so each test case will start in the right context like where in the navigation structure it is supposed to run), do you need to manually edit the tests, ... And is there anything to be aware of before creating lots of tests interactively, e.g. to avoid that your tests are invalidated by some irrelevant change to your UI?
I read in the blog post from May 2017 that the TestRecorder "wasn’t picked up by many developers and as such it stagnated". I tried TestRecorder and immediately came across a seemingly basis error in it (missing test for null) when recording a test case using the Toolbar, which gave the impression it is still the case. So, if anyone here is using another approach that is working well for you, I'd love to hear about that.
See the test classes we use to test Codename One itself here: https://github.com/codenameone/CodenameOne/tree/master/tests/core
You can use the test recorder to generate a skeleton but you can do this manually just like any test. The test API lets you invoke the app or just pieces of it and perform assertions on the behaviors within.
What sort of challenge will occur while automating Single Page Application tests using WebDriver
Hi answer to your question can very person to person but i think you should take care of following things :
1.for personal front please do not use POM page object model framework for SPA use data driven or even keyword driven both will work fine.
2.use small re-usable methods so that u can skip code redundancy.Also it will help in overcoming various exception like stale element exception.
3.also try to divide your SPA in various blocks (for example header ,footer,grid etc -hence when you will do any operation you know where you have to go it will give you a clear idea and easy code maintenance)
for now i can think of these points hope this helps you
I have been thinking implementing translation for my app and I have the following idea
Make the English and My language [Amharic] mirror jsons and render English if selected. Just configuration Json file from the server that gets called once app routed
Make all in one API to get the json once and persist
will it be a good idea,How is this implemented on real world
Don't need to implement it yourself. angular-translate is an excellent module, here you can take a look at it: https://angular-translate.github.io/ .It covers everything you need.
It is plenty of features and some of them are:
Flexibility
Pluralization
Directive
Filter
Service
Asynchronous loading
Keep in mind that this module has been there for a long time and many people use it. You can solve everything you need and there is no need to reinvent the wheel.
We are currently running smoke tests using Selenium Webdriver & JUnit against a B2C product. Since we are using Selenium, the scripts are totally dependent on the UI. Given that the product is out of a tech startup, the UI & workflows keep changing/evolving # an extremely high frequency.
The Consequence: Smoke tests which are supposed to validate the sanctity of the application keeps failing. The team spends more time fixing the scripts rather than validating the build.
I am pretty sure most of the Automation folks out there would have faced similar issues esp. with rapid dev cycles. Looking forward to see some approaches undertaken by others in the industry who have faced similar problems.
Note: The frontend is developed in PHP
Webdriver works roughly like this: there is a start point, webdriver interacts with it (by simulating a button press for example) and then finds the next item to interact with. The next item might be on the next page or the same page. It might be found in various ways, by id or the 3rd div that is class="foo" etc.
The tests are things like does the page load with 200 OK, does the string "login" appear in a particular place and so on
The problem with a changing UI is that all the elements "move about". The ids change and the 3rd div class foo disappears. This means that the webdriver interactions fail and the tests if they are looking for particular elements will fail too
One solution is to develop and test against a set of ids. These ids will refer to fixed UI elements. All searching in webdriver should use the ids. The development team writing the PHP will put the ids in the correct places.
The set of ids can also be used as the basis for a sort of specification and can be used to explain UI flow in different ways to different stake holders.
I do not know of any specific product that handles this process of managing ids in both tests and development code but maintaining a "lexicon" like this to describe the UI items should not be a major task
The more versatile the System under Test is the more important it is to have a framework on top of Selenium that reduces the maintenance effort for a change.
For the most common changes in a System under Test there are several known patterns that can help you to reduce the maintenance efforts:
By using UIMaps to model the UI of the application it is extremely easy to handle changed IDs, CSS classes or similar changes
PageObjects reduce the effort for larger UI changes (e.g. when an input field is changed from a TextBox to a Dropdown field)
Use Keyword Driven Testing to model test cases without any knowledge of the underlying technological representation. i.e. a keyword encapsulates an action from the users point of view – a example for a keyword can be: “loginWithValidUser()”
Don’t just utilize the UI for smoke testing if the UI / Application / Workflows change drastically and very often. Most of the time it is also helpful to test certain functionalities by calling WebServices without any Web-UI