August 29, 2013 at 11:08SWD Page Recorder: Writes PageObject classes for Selenium WebDriver
I’m sure that experienced automation experts from the world of web testing on Selenium WebDriver have already managed to taste all the advantages of using the PageObject pattern in their craft. Yes, this also reduces the time for servicing automation code, and more readable simple and reliable code. Unfortunately, too much routine effort is still being spent on creating new PageObject classes and supporting existing ones. Fortunately, there are tools that can help reduce this routine “manual labor” of the automation tool.
SWD Page Recorder is an attempt to create one of these tools.
What problem does the SWD Page Recorder solve?
The biggest problem is the lack of a means of quickly declaring elements of a real web page. SWD Page Recorder will not write an intelligent PageObject for you, but it will significantly reduce the time in the process of searching for a page element and adding it to the code of the test automation framework. SWD Page Recorder allows not only to find the required locator, but also to optimize it (reduce the size) and generate all the necessary code for the subsequent insertion of the element declaration into the code of the test framework.
How is this problem already solved?
Instead of bringing something fundamentally innovative, the mission of SWD Page Recorder is to optimize and speed up the approaches that are already applied today. For example, the best-known approach to finding and debugging the required web element locator is to use the Developer Tools, which are available in every browser. The problem is that for different browsers, the toolkit is also different. For example, for Firefox you can use FireBug + FirePath, for Google Chrome - console commands or direct calls via JavaScript, for the 10th version of Internet Explorer ... in general, everything is somehow deplorable here: CSS selectors can be debugged through the search bar , and XPath - by no means by standard means.
SWD Page Recorder provides a single tool for debugging locators for all browsers that Selenium WebDriver can work with. And here it is worth emphasizing that Page Recorder tests everything through WebDriver itself - so that you will not have such a problem when a locator found in another way - may not work in WebDriver.
Key Features
In-Browser Web Element Explorer
After starting the Start button from the SWD Page Recorder, it implements special scripts in the launched web browser. Using Ctrl + mouse pointer , you can highlight the desired item on the web browser page. When you press Ctrl + Right button - a form will appear that offers to add the found element to the application. After filling in the name field and clicking on the “Add Element” button, the found element will be saved in the PageObject tree in SWD Page Recorder
Generating code for a PageObject class in C #, Java, Perl, Python, Ruby
Upon completion of work on adding elements to PageObject, on the “Source Code” tab, you can generate a PageObject class in the programming language you are interested in.
It is worth noting that the templates of PageObject classes in different programming languages are implemented using the Razor template engine - the most popular ASP.NET MVC among programmers.
Templates allow you to use C # code inserts inside. And in order to add a new template - just create a new * .cshtml file in the "CodeTemplates" folder. The first template in the list (by default) will display a file with the string “(Default)” in the name.
The template engine allows you to add new templates without recompiling the application, but to update the list, the application must be restarted.
I will make a reservation right away that compiling and debugging templates is not such an easy task in this version, but you can always ask me for help.
Saving a PageObject Structure
Until work on the construction of the PageObject class is completed, the application allows you to save the operating time in the “* .pox” file, which will be located in the folder with SwdPageRecorder.exe. This is a standard XML file resulting from XML serialization. After saving the changes, at any time you can close the application and restore work later.
You can open the folder with * .pox files using the “Files” button. To delete a file from the list of existing ones, you can simply delete or transfer the file.
Debugging and finding locators
By double-clicking on an element of the PageObject tree, you can open the web element locator for editing in the “Locators” tab.
The upper part of the form allows you to edit the locator and set the desired search method (Html ID, CSS, XPath, etc.).
After editing the locator, do not forget to click the “Update” button and the locator will be updated in the internal structure of the PageObject class.
The lower part is used to search for locators. When you click on the Test button, all found web elements will be displayed on the WebElements tab on the right. Double click on the found element - displays it in the DOM tree of the page on the right. Double-click on an element of the DOM tree - highlight the element in the browser.
Use Case: Creating a PageObject class for the registration page
Prerequisites: You have the Firefox browser installed. To use another browser, you will need to download the driver for the desired browser and save it next to “SwdPageRecorder.exe”
Step-by-step instructions for the main use case
The generated code or part of it can be inserted into the code of the test framework, or continue editing / adding elements to PageObject
Launch browser
- On the “Browser Settings” tab, leave “FireFox” by default or select a different browser and click the “Start” button
- Wait for the browser to start (the “Start” button will change the title to “Stop”)
- Go to the page "https://auth.habrahabr.ru/register/" in an open browser
Launching a web element explorer in a browser
- On the “Locators” tab in the application, click on the “Start” button in the “Web Element Explorer” group
- Switch to browser
- Holding Ctrl and moving the mouse, make sure that the elements are highlighted (the background color will turn gray)
- Pressing Ctrl + Right button on an element - you will call the form to add an element. Invent and enter a unique name for the element in the "Code identifier" field and click the "Add Element" button
Editing found items in the application
- Switch to the application and note that the new element has been added to the PageObject tree on the right.
- In the field below the inscription “Page Object File” - think up and enter the file name for the page.
- Click the Save button to save
Code generation
- Go to the Source Code tab
- Click on the “Generate” button to generate the PageObject class code.
The generated code or part of it can be inserted into the code of the test framework, or continue editing / adding elements to PageObject
Product quality
This version is an attempt to create a minimally viable product , which, on the one hand, will help you speed up and improve your work, and for me - to collect valuable feedback that will help improve the product in the future.
Therefore, the presence of flaws in bugs in non-standard scenarios may not be rare.
Feedback on the SWD Page Recorder, you can leave as in this post on Habrahabr, on Github, in any announcement on my blog and send it by email (which can also be found on my blog).