Introduction
The following is an Example of implementing the Page Object
pattern in C# using Microsoft Coded UI. It will help build less brittle and
repeatable test. Note to write and run coded
UI test you need visual Studio Premium or Above.
Page Object Pattern
There is a lot of information on the Selenium Wiki also
Martin Fowler has a great blog on the subject. The
following blog is a practical example of how to implement the pattern in C# using
coded UI.
Application under Test
The example below is written to test the Contoso University sample web
application you can follow the link to download and build the app in visual
studio.
To ensure the app can be automated you will need add some Automation
ID’s; the automation id is a property which helps you to find a specific UI
element. There are many ways to identify UI elements but having a set ID will
make things easier.
On the Nav bar you will need to add an ID for the Create
Student Link
You will need to do the same for create student view (Views\Student\Create.cshtml)
Do the same for First Name (student-firstname), Enrolment
Date (student-enrolmentdate) and the create button. The create button is a HTML
element see below for an example.
Now build and run the
app, you can use the browser development tools to verify the ID’s.
Creating a coded UI test project
You will need to create a
new coded UI test project.
Cancel the Generate
coded UI Test window
And add a blank unit
test.
Coding the Page Object Pattern
Let’s consider a 3 simple
test case for create student, the expected outcomes are;
- Student is created
- User is returned to Home Page
- Student is Listed on Home Page
The follow example
focuses on test case 3. Now consider the
Steps needed;
- Open the browser
- Select Create Student on the nav bar
- Enter student details on the Create Student Page
- Click Create
- Assert the student is shown on the homepage
The model Page Object Pattern for The Homepage would look like this.
Homepage is defined as a new class.
In this example there is
a basic constructor; the browser window is assigned to a field as we need it
elsewhere.
In a future post I will
deal with adding code to verify the page is loaded.
A method is needed to
click the Create Student Link and return a new page. The mouse handler is part
of Coded UI API.
Create Student Link is a
property in the Homepage Class.
Because we are using ID’s to
identify the UI elements we only need 1 search property.
Notice the Class of HtmlHyperlink The HtmlControls namespace provides classes that represent HTML controls. This is how all the hyper link properties and methods are exposed to the tests.
The
create student page might look something like this
In the test we use the
HtmlEdit.Text
Property to input the text, you
could use Send
Keys and create a wrapper method in the page class.
Now run the test and it will pass.
Conclusion
I have shown an example of how to create a page object pattern in c# using Microsoft Coded UI. A full copy of the
code can be download from https://github.com/sgray1/CodedUI_Demo. Future post will show examples on how to create a page objects patterns in Selenium and c#.
I'm building "hand-coded' CUITs, which I write about on my blog.,<
ReplyDeleteSome posts:
-- Clean and DRY Verifiers
-- Keep Your Page Objects DRY
-- Object Not Found? Log the Context!
-- Encapsulate the GUI Tool?
-- Getters and Setters