How many times you spend many time on creation project from scratch when you are writing your web tests? How long does it takes to understand why the item is not found on the page, although it turned out that you simply not put a single quote in the locator code? Have you ever feel that you need some simple tips for how to describe the path to element on the page?
Specially for you(and not only) we developed Intellij IDEA plugin which, how we hope, will become your friend and good assistant in tests creation.
Install.
For installation you must do following instuctions:
1)Open IDE Settings and select Plugins
2)Click 'Browse Repositories' button
3)Search for 'Selenium Plugin' and select 'Install Plugin'.
Now your IDE is ready for tests creation!
Project creation.
If you now start your web tests developing you, as we think, do one of these actions:
- Take your old code and move it to your new project
- Create new project and think, how to build your tests architecture
We did first and second many many times. These actions are really boring for us. Now we want to introduce you first feature of our cool plugin - quick creation of ready for use project for web tests creation. Now, if you want to create project, which is ready for tests development, you could do it by click about 3 buttons! Thats all!
For this you must do following actions:
1)In the left tom corner select File -> New Project...
then
2)In opened menu, select Java on the left
And then click Next
3)Select checkbox 'Create project from template' and select Simple Selenium App
And press Next
4)Insert your project name and directory
And click Finish.
After this you will have ready to work project!
Of course, we can not with 100% confidence say that as an example we have created is perfect for each project. But we tried to make it as much as possible convenient and easy to use. If you have any questions or suggestions, as we can improve the project - please contact us. Together we can make a perfect every little part of the project, which could become a benchmark or a base for the development of web tests. You could find project description here.
There we must talk about another cool thing - now we have an a Selenide support!
Selenide.
In our plugin we have an a support of Selenide framework.
First of all - now you can create preconfigured project with tests examples that uses Selenide! To create such project you should do the following steps: New Project->Java->Selenide Tests App. And thats all! In 5-10 seconds you have an a ready for use tests project! Cool, isn't it?
Also we have an a code complete,check locators errors and check element existence for selenide $ and $$ functions(you could see more info about these features in this article).
Now, let's talk about another cool features of our plugin!
Fields and annotations generations.
Now, many engineers, while developing automatic web tests using selenium use PageObject pattern.
In our plugin we tried to make using of this pattern more comfortable. And first we would like to tell about - it's fields generation.
After installing plugin you could use following methods to create fields for web elements:
1)By using hotkeys combination ctrl+W. After that you'll see next block in your code:
Now you not need to loose your time on writing 2 lines of code - now you just simply insert your locator and, if you need, rename variable.
2)By using popup, shown by click on the right button on your mouse in editor. Let's describe in more details how to do this :
Click on the right button of your mouse in editor and select menu element 'Generate'
Then select Web Element(s)
After this you'll see elements creation menu:
There you could choose, what to generate - single element or list(java List) of elements.
Also you could insert field name and locator type here.
As a result(for list of elements), after completing insert all the values, you'll see next in your code:
3)You could add @FindBy annotation to already exist field by pressing ctrl+S combination. As a result - from above the field annotation will be added.
4)You could add By object by pressing ctrl+B.
As you could see, near the field there is some small icon - selenium logo. This is also one of nice innvation of our plugin - all fields, annotatied by @FindBy(of @FindBys) will be marked with such image.
Locators values verification.
As you could see on the images above, there is a red line under locator empty values.
As you cold see before, locators values are underlined by red line. One of the main features of out unique plugin - locators values verification. We spent a lot of time for creation of logic of verification. And, as we think, we got it. Let's talk about it in details.
Turning ON verification.
By default - locator verification is turned OFF. If you want to activate it - you must do following simple actions:
1)Press selenium logo-icon in toolbar
(If you not see toolbar - go to View and select Toolbar)
2)Now you'll see locators verification configuration menu:
For enabling - you just select checkbox 'Enable Selector Check' and then select one or more methods. We specially did the possibility of enabling and disabling of methods separatly for give you an opportunity to configurate our plugin as you want. After selecting - just press OK.
What verification do?
Now let's look at some examples to understand the process of locators values verification.
Let's suppose that on our test web page we have an element with css selector: div[class='some good classes']
Now let's create an field for element(by using ctrl+W combination) and do some small error in locator value - 'forget' last single qout after classes values.
As a result we'll have following block of code:
In this code you could see red line under place where our single quot must be. Is it really good? You could see error right away and not to search it after running your tests in thousands of lines of your code. And it is not simple to see this little single qout. Let's imagine, that your locator is not so simple as in the example? It is very easy to make an mistake.
If you'll move your mouse over the red line - you'll see tooltip with hint about what is the reason of your error. In our example we could see next:
By this hint you'll simply understand what is the reason of your mistake.
Also you could see an error message by click on the red line. In this case it will be shown in the IDE footer.
Cool, isn't it?
Also we want to pay your attention that this functionality of locators verification is available when you are trying to write your locators through findElement(s) functions of WebDriver or WebEement objects.
In this case you'll see next:
After verification we want to talk about second great feature of our plugin - locators errors fix helper.
Fixing of errors.
What if you don't know how to fix an a mistake in locator? Let's explain that you have a little expirience in web tests development and not clearly understand how to write your locators optimaly? Or it is not simple for you to understand how to fix locator error?
Our plugin will be a good assistant for you.
For fixing of locators errors we have 2 ways. One we will describe in this section, second - in the next, because it is also another big and cool feature of our plugin.
Okey. We se an error. Let's move the mouse to the red line and in one(or two) seconds we'll se a little icon(a red lamp) near the field:
When click on it - popup is shown. In this popup we could see variants of fixing of error. It looks like this:
Look at variants 'Check element existence and fix' и 'Open fix popup'? Let's start from the second. After selecting this variant you'll see the next menu:
There you could see an error, but also you could see an a hint, what you could do to fix it. In our case it talks, that we must add single qout after attribute value(if this attribute is not a name). Let's do this fix and add qout after 'classes' word.
When mistake is fixed - we'll see an a message:
This message tell us that our locator is correct. After pressing OK locator in code will be changed on the value that we fix in menu.
Do you remember, that we told you about the second variant of errors fixing? Let's talk about it in more details.
Element existence check.
This functionality is available as a variant of fix of an error and as a independent cool feature.
Do you rememeber that when we click on the 'red lamp', we could see several variants of fixing of locator errors?
Now let's select 'Check element existence and fix'. We could see the following menu:
If you want to check element existence - you must insert an adress of the page on which you want to do your verification in a field 'Address URL' . After this - 'Check' button becomes enabled and when you click on it - check will be executed.
Аfter that you could see one of the following messages in 'Status' field:
- Not Found - if no elements were found on the page
- Found 'n' element(s) - n elements with specified locator were found
- PhantomJS not configured. Please insert path to phantomJs to the specified field - in case when path to phangomJS executable file not specified
- some exception. No one is immune from mistakes. If you see any exception in 'Status' field - contact us immidietly.
We would like to talk separatly about the field 'Path to phantomJS'. Since our plugin can't determine where executable file of driver is located on your machine, then for correct work of elements existence check you must specify the path. Of cource, you did in once, then in will be saved in the project settings and will be inserted automatically.
If you have any problems while setting up phantomJs - you could use product official site or contuct us. We will help you with the great pleasure.
Since our locator contains a mistake - we will receive the first message, telling us that the item is not found. Once we fix the error - after we see a green message that the item is found. Just after the correction 'Save new locator value' button becomes enabled. After clicking on it the value from the field 'Element Locator' is inserted in the code. This is very useful when this menu is used for error correction.
Check existence of an element on the page can be used not only as an assistant for correcting locators errors, as well it could be useful for checking whether locator was made correct at all.
To invoke this menu for any of the elements - you can move your mouse over the locator value, right-click and select 'Check Element Existence':
After this you'll see the menu described above.
Also we would like to note that the functionality of verifying the existence of an element (like finding errors) is also available when you use findElement and findElements methods of WebDriver or WebElement object. To do this, move your mouse over the locator value in the method parameter and just select the 'Check Element Existance' the pop-up by pressing the mouse right button.
Locators creation assistance.
Writing locators is one of the most frequent actions executed while writing tests on the web. Through them, we search elements we want to interact with.
For making process of creating locators became more comfortable, more pleasant and easier - we present another great feature of our plugin, namely - Code Complete for locators.
You probably often encountered code complete when writing program - you enter a point after the variable name, press the key combination alt + space (or other configured combintation) and IDE provides you variants that you can write on. This reduces the time and minimise the chance of make a mistakes.
Before we start development of our plugin, we thouhgt - why there is no functionality of suggestion of locator variants? It could be very convenient - you start typing your locator, then press alt + space and you see possible variants on how to write a locator. This could reduce the time for typing a text, as well as with high probability would help to avoid mistakes that we described earlier in this article (remember the forgotten single quote?). Also this functionality would be useful for beginners - those who are just beginning to understand how to make locators.
All our thoughts have led us to what is now this feature has become available to you! We would like to demonstrate it with an example.
Let's create a WebElement field (and let's again use hot keys ctrl + W).
We see that the value of the locator is empty and marked as a mistake, as the locator can not be empty.
Place the cursor between the quotes and press alt + space. As usual when writing code, we will see the code complete menu, which in this case will offer us various options of how to start our locator. It looks something like this (for css):
We could see that we can start from some symbols or with the tag name. We have tried to insert in our dictionary as much as possible names of the tags tags that you had to choose from.
Further, as soon as you begin to enter more symbols - number of options will be reduced.
We chose tag div from variants above. After pressing alt + space we will see a narrower range of variants:
We know that after the tag name can be either a bracket to enter the value of an attribute, either a space or a point to define a class, or a ':' for input functions.
Select the first option ("div [") and then press alt + space:
We were offered a range of options to continue, including the name of the attribute and possible values of equality.
By choosing one of the options - it will be immediately inserted into the value of the annotation. It is hard to forget a single quot when constructing locator in such way, is not it?
Note that the function code complete is available for all versions of lotactor creation methods(xpath, id, etc.), as well as it works fine for the values in findElement findElements methods of WebDriver or WebElement objects.
On this our story about our cool and unique plugin cames to an end.
If you have any questions or suggestions as how to improve or add - always email us.
If you find an error - immediately write us about it.
We are always open for dialogue and ready to listen to you and implement any ideas. Together we will make our plugin even more convenient and easier to use, and thus further simplify the process of writing tests.