Tackling CSS & Xpath Selectors

Over usage of Xpath and CSS selectors in scripts can result in flaky tests. At times these selectors does become handy as workarounds but limiting their usage in overall test suite is always preferred.

While arriving correct Xpath or CSS class for an element is quite challenging at times as per complexity of page written. Hence they end-up being asked frequently in various selenium groups/forum.

Advanced browsers like Firefox and Chrome has rolled couple of features in their developer tools which avoids hassle of building Xpath & CSS class from scratch. So let's dive-in with Chrome Browser.

In Developers tool bar >> Elements Tab, users can Right-Click on any DOM element to find following options (1. Copy CSS Path & 2. Copy XPath)

Now identifying Xpath/CSS Selectors for any element is just 1-click away. At the same time while debugging flaky scripts we end up with Not-so-User-friendly CSS or Xpath which is causing trouble and end up spending lot of time in identifying them.

So let's see how to identify an element using it's CSS/Xpath selectors using same Chrome browser.

Verifying CSS Selector

Using Copy CSS Path gave me following text "#V8u91sLn5RUivryG9JDpR1mpGht6dNLJWIuBtpCbtIg\3d _14865a88086\3a 12b85cb\3a e733c813_summary > span:nth-child(2)". Now let's try to identify the same element.

Via Elements Tab

Let's search with the CSS Path obtained and it should instantly identify the first element that matched the criteria. If one or more elements are matching CSS criteria searched then they can be navigated.

Verifying Xpath

Using Copy Xpath gave following "//*@id="V8u91sLn5RUivryG9JDpR1mpGht6dNLJWIuBtpCbtIg=_14865a88086:12b85cb:e733c813_summary"]/span[2]" . Now let's try to identify the same element.

Via Console

Type the following code $x("XPATH OBTAINED") and it should identify that element and display's inner HTML as output.

Via Elements Tab

In elements tab let's search with the Xpath obtained and it instantly identifies the first element matching criteria. If one or more elements are matching then user can navigate through them individually.

So as a result we can identify Xpath/CSS selectors for an element in page as well as verify/identify elements with given XPath/CSS selectors. Hopefully this helps to reduce flakiness in your automation scripts.

Broken reports (Selenium - TestNG)

To start TestNG is designed to be a unit testing framework, hence its reporting is confined. But the trouble starts when we start using it for functional testing and expect reports to support automation needs.

Using Selenium Web driver in conjunction with TestNG or any unit Testing framework gives us more flexibility in organizing and executing them. As a result we are stuck to basic unit testing reports which doesn't fit the bill.

Given the best scenario, every tester/developer loves to see all tests passing after Automation run and which happens seldom at last stages of product/project but tests and code are bound to be fragile (in turn fail) during initial stages. Hence dealing with failed scenarios is mandatory and major task while preparing tests.

To analyze failed scenarios we resort to information provided in current reports (stack trace) and if still unclear we re-run scenarios and verify manually, which is why unit testing reports doesn't fit the bill for selenium automation. Since we couldn’t figure out what exactly happened, we end up running tests with manual efforts.

Considering TestNG, its report Structure contains following:

            1. Test suites

            2. Test cases

            3. Test Status (Pass/Fail/Ignored)

                        a. Exceptions in case of failures

            4. Description of Test Cases

            5. Logging information.

Here are some required information which can help to zero-in issue with failing scenario whether the test is flaky or the application went wrong somewhere:

§  Screenshots of browser: After seeing exception first thing most of us would love to see is screenshots of browser for any hints/idea what happened even before visiting Codebase.

§  Browser & Platform info: Right now this can be included manually creation of reports. Eventually in automation everyone tries to run tests over different browser environments rather than manually keeping information overhead it would be good to map execution of tests w.r.t browser environments by default.

§  File Bug directly from Report: Any one can report bug directly from the report itself. While reporting, it should also attach all info from report (Screenshots, exception, Test description & Logged info) to respective Bug.

§  High Level Reports: Reports by default assumes audience as Developer/testers and misses others. It should also provide to give high level representation of test data other than detailed ones.

§  Error Levels: Going a point further it would be good to categorize errors as per need. This helps to address critical errors first and later can move on to mild errors later. All assertion errors are Critical errors where the actual & expected results don't match and can be potential areas for bugs/flaky tests. Next comes Mild errors potentially exceptions such as “NoSuchElementExceptions“& “InvalidElementStateException“.

§  Logging Info: Current TestNG report does display the logged info, but it’s displayed separately in another tab/page, whereas it should be displayed in the same area where the test status is displayed. To save efforts at the same time similar info is present at the one place.

Though there are few options available to enhance TestNG reports to further levels.

ATU Reporter: An open source reporting utility and can be customized to create graphical reports. Yet it doesn’t fulfill the most important ones.

In TestNG we can create custom reports by implementing IReporter interface and building simple reports are quite easy. But the more complex reports you want them the complexity to implement increases exponentially. Implementing above requirements using TestNG interfaces is quite challenging and any small customization involves lots of code change.

References

1.    http://www.deepshiftlabs.com/sel_blog/?p=1930&lang=en-us

Theory of Qualitivity

"Quality" is great word and is an integral part our daily life. On Googling "Quality" I found Wikipedia's definition more compelling than rest.

It says "Quality is Non-inferiority or superiority of something. It's Fitness for purpose."

Sounds Simple right!! great...but how it's integral part our Daily life???? !@#!$!$???

Keeping aside our roles as Developers/Testers, aren't we consumers too…

"While buying Gadgets…..looking for Best quality Phone/Tablet"

"At Restaurant….looking for best quality of food (*Any Cuisine*)"

"At Hotel stay….looking quality of Service "

Such examples are countless, I would say that every language has it's own definition for "Quality" word. In Hindi language it's commonly referred as "Visheshta" and in common slang "Sasta aur Theekao". But when we transform ourselves from Consumer to Developer we do miss out this imp factor (Quality) while writing our code.

Pic 1.1

Quite tempting pic (pic 1.1) isn't it….These are some famous Indian snacks that you can find in corner of every famous streets in India. Some like the taste of it and some the quality of snack while few like the combination of ingredients...but

 how much time does chef get's to prepare ?

Ans: Not more than 5-10 minutes

You may ask from where of sudden this came into picture of Quality… In these 4 years of experience, I saw people who "Blame time for Quality "and yet they tend to forget in  role as consumer they never give luxury of time for a chef and yet expect good quality and taste both.

Another set of Image (pic 1.2) though not easily found in corner of every famous street, but there is a catch. As said "Get it right from the beginning or you have created a permanent mess" and this caption finely defines the content in Image.

Pic 1.2

Everyone knows why "Tower of Pisa" has been awarded a prefix "Leaning" and a biggest car Recall Program from Toyota due to serious bug in rolled out models and last but not least… A Steps trying to address the needs of Wheel Chair. It applies the same for Software as well.

Theory of Qualityvity

Lets discuss in real terms, Quality is always relative and you can't define benchmark quality in terms of 100% . There are lots of blogs/articles which do mention the same.

In simple terms, Quality can be regarded as Function of "Cost" and "Time". To be more specific Quality is Directly proportional to "Time" to a till a threshold level(T). Beyond this threshold level more time spend on improving quality might not have same impact.

Here we have 3 cars from MarutiSuziki, Honda & Mercedes. Given the cost of Vehicle and time required for Manufacturing differs for all the 3 models here. It doesn't mean car of MarutiSuziki has no quality at all, considering the cost bracket this would be best Quality car in it's range.

I would define improving Quality as a process of MarutiSuziki car becoming Honda Car over a period of Time & Cost.

Quality should be always considered as "Act of Prevention than Act of Detection", but the best part about it can be confirmed by process of Testing^[1]. Complete team is responsbile for quality where dev team responsbile for writing quaility code and Test team responsible for verifying Quality of product.

References

1. How Google Tests Software- by ​By James A. Whittaker, Jason Arbon, Jeff Carollo

2. ​Quality (business) - By Wikipedia