Introduction
This is part 2 of my experiences with writing test scripts for WDA with Selenium (IDE). The first two parts are here:
Test Scripts for WDA with Selenium - Part 1: Reasoning, Background
Test Scripts for WDA with Selenium - Part 2: Writing The First Two Scripts.
A general request: Everything here is my current experience. I am learning as I go. So if you have alternative or better solutions for some of the things, please do not hesitate to comment. I hope to improve the blog as time goes by.
Third Script - Do The First Clicks
My first two scripts were rather boring because they hardly did anything. They mainly checked for UI elements. This will change now.
I had to experience that due to the lack of stable IDs, finding and clicking the right element can be really tricky. I had to experiment a lot. Two sources helped me tremendously:
- The XPath reference.
- The XPath Checker add-on for Firefox.
Without those, I would not have come this far. Reminder: I am new to XPath. But let's start.
I call our so-called "Content Selection", which is a "classic" WDA page, meaning no Floorplan Manager. It looks like this:
These 4 commands call the page from the navigation menu that I showed in part 2:
| pause | 1000 |
| waitForElementPresent | //a[text()='New'] |
| click | //a[text()='New'] |
| waitForElementPresent | //span[contains(text()[2],'Management Journal')] |
The fourth command is special. What I wanted to do was to wait until the page was loaded. To do that, I wanted to wait for the first menu option, "Management Journal", to appear. That turned out to be difficult because the HTML looks a bit weird. To be honest, that is probably driven by the way we developed that WDA page... Here is the HTML:
<span class="urCLbl urCl1" unselectable="on" f="WD9A" ti="0" tabindex="0" id="WD9A-lbl"> <img align="absmiddle" style="-moz-user-select:none;" class="urRImgOn" src="/sap/public/bc/ur/nw5/1x1.gif" id="WD9A-img"> Management Journal</span>
So the text starts with two blanks - but they have an image in between. First I could not find the XPath to identify the <span> that had the text "Management Journal". You find some discussions about XPath and blanks (e.g. here) but none helped.
Then I tried using a sub-string like this: //span[contains(text(),'Management Journal')] That XPath basically means: return the <span> that has inline text containing "Management Journal". It did not work.
Finally, XPath Checker showed me the problem: Because of the <img> in the middle, the <span> has an array of two texts: The first with " " and the second with " Management Journal". So I had to use the second entry in that entry. Fortunately, XPath can do that with the syntax you see above.
That was when I became a friend of XPath...
With that little trick, my script could do the next few clicks:
| click | //span[contains(text()[2],'Management Journal')] |
| waitForElementPresent | //span[contains(text()[2],'FC')] |
| pause | 1000 |
| click | //span[contains(text()[2],'FC')] |
And so on... You see the waits for AJAX and the additional pauses. As mentioned, I have not found out how to avoid the pauses.
The next commands checked for UI elements etc. Nothing you have not seen in part 2.
It Gets Better...
Again, I got stuck soon after. Look at the third column in the screen above. There are several checkboxes. The problem with those was that their texts were not unique. So far, I identified all elements with their unique inline texts. That was no longer possible.
So I tried to find an XPath that said: "Look for a <span> with text 'P&L PAC' and return the first <span> containing 'Expense' in its text that comes after". And XPath can do that. The syntax is: //span[text()='P&L PAC']/following::span[contains(text()[2],'Expense')][1]. So there was my next command:
| click | //span[text()='P&L PAC']/following::span[contains(text()[2],'Expense')][1] |
After that, I felt lucky. I wanted to try to check if the checkboxes for "Title Page" and "Glossary" in the last column were set. For that you have to know that WDA renders the checkboxes as images with different CSS classes: 'urCImgOn' if selected and 'urCImgOff' if not.
So I went for an XPath that looked for the <span> with text "Title Page" and returned the first <img> before it, if it is of class 'urCImgOn'. Also that works. It looks like this:
| verifyElementPresent | //span[text()='Title Page']/preceding::img[1][@class='urCImgOn'] |
Summary
The rest of my scripts so far use the same concepts described here and in part 2. After seeing how powerful XPath can be, I feel that I should be able to script meaningful tests, even without having fixed IDs.
As mentioned, I keep going. If I learn more noteworthy XPath variants, I will add them here. Again, if you see anything that can be done better or easier, please let me know in the comments.