What you'll create
What you'll need
Create the project
Open Eclipse and create a new Maven project. Leave the default values until the group and artifact Id need be to specified. Set the group Id to "info.novatec.testit" and the artifact Id to "webtester-example-twitter". Set up the project and create the files as depicted below.
How to create the src/test/resources folder and the properties fileIcon
properties file: Right-click on the "src/test/resources" folder > New > Other > General > File
Configure the Maven project.
Set the Twitter username and password.
Create PageObject for Login Page
After you've set up the project it's time to start writing some code.
To login into your Twitter account we need to setup a PageObject for the Login Page. Open the TwitterLogin class and have it extend the PageObject class. Now we need to find the respective HTML elements to interact with on the Twitter page. WebTester can identify Objects by id, class, xpath or css using Selenium. After inspecting the HTML source of the Twitter Login Page you'll need to find the Objects you can interact with. In this case the login button, the username field and the password field. We'll identify these two fields by id, while we'll use the class to get the login button.
We need to make sure that we are on the correct page @PostConstruct of the PageObject. To achieve this the page title is matched with the title we expect. In our case the title should be the following.
Welcome to Twitter - Login or Sign up
For all the gory details, please view thebelow at line 23.
For the login process we need the following methods: setUsername, setPassword, clickLogin, and login. Note that these methods return type must extend PageObject. It is a representation of the state of the page opened after the methods execution.
The methods setUsername and setPassword return instances of TwitterLogin while clickLogin and login return instances of TwitterHome.
When using @IdentifyUsing with an Id, it's not necessary to explicitly define the method used as Id is the default.
Create PageObject for Home Page
Similar to the Login Page we create a PageObject representation for the Twitter Home Page.
As PageObjects can represent either entire pages or just a certain part of it, we use the TweetBox class as a representation of Twitter´s TweetBox.
Create the Test
The TwitterTest must @RunWith the WebTesterJUnitRunner class for JUnit support.
The Browser class represents a real Browser (here Firefox). It´s class comment states that it
"Offers methods to interact with the web browser by using a wrapped Selenium."
"All browser's life cycle is managed on class as well as test level (static / non static fields). To use this feature simply declare a Browser field in your test class and annotate it with @Resource. Every uninitialized (null) field annotated in that way will be injected with a new Browser instance. Fields which are already initialized with a Browser will be included in the life cycle handling as well, but no new instances are created by the runner." - WT Getting Started, WT JUnit Support
In this example the @CreateUsing annotation specifies the Browser to be an instance of Firefox.
The @EntryPoint is the initial page used by WebTester. It´s the first page the configured browser navigates to.
The Twitter password and username are taken from the "testit-webtester.properties" file using the @ConfigurationValue annotation.
@Before test execution a representational instance of the Twitter Login page (twitter.com) is returned by the PageObjectFactory as a TwitterLogin (created above) object.
During the @Test WebTester will use twitterLogin to log in with the username and password specified in the properties file. After a successful login a tweet containing the current system time is tweeted and the test then asserts that the tweet has been tweeted.
Congratulations! You´ve just developed a simple Twitter login and tweet test with WebTester.