Test Automation Using Atata: Verification of Web Pages

    0
    29

    Introduction

    In this article, I would like to explain web page data verification approaches in details using Atata .NET test automation framework. The article describes verification of: page title, headings, text content, numeric content, links and blocks of HTML content.

    Atata Series

    1. Atata – New Test Automation Framework
    2. Test Automation Using Atata: Verification of Web Pages
    3. Test Automation Using Atata: Verification of Validation Messages

    Background

    In the previous article, Atata – New Test Automation Framework, I tried to explain the basic features of Atata Framework. It is recommended to get familiar with that article before reading this one.

    Sample Page

    For testing purposes of this article, I created the following test page: https://atata-framework.github.io/atata-sample-app/#!/plans. It is just a sample page for the demo containing different kinds of data.

    Plans page

    Set Up Test Project

    Let’s configure the testing environment. In Visual Studio, create Class Library project and add the following NuGet packages:

    Define NUnit test class with SetUp and TearDown methods:

    using Atata;
    using NUnit.Framework;
    
    namespace AtataSamples.PageVerification
    {
 [TestFixture]
 public class PlanTests
 {
 [SetUp]
 public void SetUp()
 {
 AtataContext.Build().
 UseChrome().
 WithArguments("disable-extensions", "no-sandbox", "start-maximized").
 UseBaseUrl("https://atata-framework.github.io/atata-sample-app/#!/").
 UseNUnitTestName().
 AddNUnitTestContextLogging().
 WithoutSectionFinish().
 LogNUnitError().
 SetUp();
 }
    
 [TearDown]
 public void TearDown()
 {
 AtataContext.Current.CleanUp();
 }
 }
    }

    And here is the basic page object class for the sample Plans page:

    using Atata;
    using _ = AtataSamples.PageVerification.PlansPage;
    
    namespace AtataSamples.PageVerification
    {
 [Url("plans")]
 public class PlansPage : Page<_>
 {
 }
    }

    Verification of Page Title, Headings and Text Content

    Let’s start with simple verifications. To ensure that the current page is the one we need, we can verify its title, header and some text content.

    Plans page with highlighted primary data

    Verify in Test

    For sure, we can do the verifications in test methods. The one thing that is needed to be added to PlansPage is the Header property.

    using Atata;
    using _ = AtataSamples.PageVerification.PlansPage;
    
    namespace AtataSamples.PageVerification
    {
 [Url("plans")]
 public class PlansPage : Page<_>
 {
 public H1<_> Header { get; private set; }
 }
    }

    Now we can implement a test method in PlanTests fixture.

    [Test]
    public void PrimaryPageDataVerification_InTest()
    {
 Go.To<PlansPage>().
 PageTitle.Should.Equal("Plans - Atata Sample App").
 Header.Should.Equal("Plans").
 Content.Should.Contain("Please choose your payment plan");
    }

    Verify in OnVerify Method

    PageObject class has virtual OnVerify method that can be overridden for inner page object verifications.

    using Atata;
    using _ = AtataSamples.PageVerification.PlansWithOnVerifyPage;
    
    namespace AtataSamples.PageVerification
    {
 [Url("plans")]
 public class PlansWithOnVerifyPage : Page<_>
 {
 public H1<_> Header { get; private set; }
    
 protected override void OnVerify()
 {
 base.OnVerify();
    
 PageTitle.Should.Equal("Plans - Atata Sample App");
 Header.Should.Equal("Plans");
 Content.Should.Contain("Please choose your payment plan");
 }
 }
    }

    And the test will look this way:

    [Test]
    public void PrimaryPageDataVerification_OnVerify()
    {
 Go.To<PlansWithOnVerifyPage>();
    }

    OnVerify method will be invoked during the navigation to the page object.

    Verify Using Static Triggers

    Another approach is quite simple. You can use a set of verification trigger attributes to mark with them a page object class or control properties.

    using Atata;
    using _ = AtataSamples.PageVerification.PlansWithStaticTriggersPage;
    
    namespace AtataSamples.PageVerification
    {
 [Url("plans")]
 [VerifyTitle("Plans - Atata Sample App")]
 [VerifyH1("Plans")]
 [VerifyContent("Please choose your payment plan")]
 public class PlansWithStaticTriggersPage : Page<_>
 {
 }
    }

    And the test:

    [Test]
    public void PrimaryPageDataVerification_StaticTriggers()
    {
 Go.To<PlansWithStaticTriggersPage>();
    }

    Atata will execute the specified triggers during the navigation to the page object.

    Verify Using Dynamic Triggers

    And finally, you can add verification triggers dynamically. It is helpful when you need to pass the parameters for the triggers using constructor of page object, or if you need to get them from an external source.

    using Atata;
    using _ = AtataSamples.PageVerification.PlansWithDynamicTriggersPage;
    
    namespace AtataSamples.PageVerification
    {
 [Url("plans")]
 public class PlansWithDynamicTriggersPage : Page<_>
 {
 public PlansWithDynamicTriggersPage()
 {
 Triggers.Add(
 new VerifyTitleAttribute("Plans - Atata Sample App"),
 new VerifyH1Attribute("Plans"),
 new VerifyContentAttribute("Please choose your payment plan"));
 }
 }
    }

    It is possible to add triggers dynamically for the component in constructor or in overridden OnInit method.

    [Test]
    public void PrimaryPageDataVerification_DynamicTriggers()
    {
 Go.To<PlansWithDynamicTriggersPage>();
    }

    Verification of Complex Blocks

    Let’s try to verify the plan items. It’s a bit complex, but quite simple. We can check: name, price, number of projects and features.

    Plans page with highlighted complex data

    Fine, we have a list of 3 plan items. Let’s check the HTML source and try to determine element paths for the needed components.

    <div class="row">
 <div class="col-sm-4 plan-item">
 <h3>Basic</h3>
 <b class="price">$0</b> (FREE)
 <p>Number of projects: <b class="projects-num">1</b></p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Cras aliquam pellentesque elit eget varius.</p>
 <ul class="feature-list">
 <li><span class="glyphicon glyphicon-ok"></span>Feature 1</li>
 <li><span class="glyphicon glyphicon-ok"></span>Feature 2</li>
 </ul>
 </div>
 <div class="col-sm-4 plan-item">
 <h3>Plus</h3>
 <b class="price">$19.99</b> /month
 ...
 </div>
 <div class="col-sm-4 plan-item">
 <h3>Premium</h3>
 ...
 </div>
    </div>

    Let’s summarize. First of all, we can extract plan item as a control that is div element with plan-item class. And the control has the following properties:

    • Name – The first and single h3 element
    • Price – Currency element with price class
    • Number of projects – Numeric element with projects-num class
    • Features – List of li elements

    In Atata we need to define a custom control for such a plan item. And then, in the page object, we can use property of ControlList type to manipulate the items.

    using Atata;
    using _ = AtataSamples.PageVerification.PlansPage;
    
    namespace AtataSamples.PageVerification
    {
 [Url("plans")]
 public class PlansPage : Page<_>
 {
 public H1<_> Header { get; private set; }
    
 public ControlList<PlanItem, _> PlanItems { get; private set; }
    
 [ControlDefinition("div", ContainingClass = "plan-item", 
 ComponentTypeName = "plan item")]
 public class PlanItem : Control<_>
 {
 public H3<_> Title { get; private set; }
    
 [FindByClass]
 public Currency<_> Price { get; private set; }
    
 [FindByClass("projects-num")]
 public Number<_> NumberOfProjects { get; private set; }
    
 [ControlDefinition("li", ComponentTypeName = "feature")]
 public ControlList<FeatureItem, _> Features { get; private set; }
 }
 }
    }

    And now, we can implement a test that should verify the data of the plan items.

    private const string Feature1 = "Feature 1";
    private const string Feature2 = "Feature 2";
    private const string Feature3 = "Feature 3";
    private const string Feature4 = "Feature 4";
    private const string Feature5 = "Feature 5";
    private const string Feature6 = "Feature 6";
    
    [Test]
    public void ComplexPageDataVerification()
    {
 Go.To<PlansPage>().
 PlanItems.Count.Should.Equal(3).
    
 PlanItems[0].Title.Should.Equal("Basic").
 PlanItems[0].Price.Should.Equal(0).
 PlanItems[0].NumberOfProjects.Should.Equal(1).
 PlanItems[0].Features.Should.EqualSequence(Feature1, Feature2).
    
 PlanItems[1].Title.Should.Equal("Plus").
 PlanItems[1].Price.Should.Equal(19.99m).
 PlanItems[1].NumberOfProjects.Should.Equal(3).
 PlanItems[1].Features.Should.EqualSequence(Feature1, Feature2, Feature3, Feature4).
    
 PlanItems[2].Title.Should.Equal("Premium").
 PlanItems[2].Price.Should.Equal(49.99m).
 PlanItems[2].NumberOfProjects.Should.Equal(10).
 PlanItems[2].Features.Should.EqualSequence(Feature1, Feature2, Feature3, Feature4, Feature5, Feature6);
    }

    This is it. If you run this test, it will succeed and generate the following log to NUnit console:

    2017-05-18 21:12:26.6363 INFO Starting test: ComplexPageDataVerification
    2017-05-18 21:12:26.6513 INFO Init WebDriver
    2017-05-18 21:12:29.2457 INFO Go to "Plans" page
    2017-05-18 21:12:29.2717 INFO Go to URL "https://atata-framework.github.io/atata-sample-app/#!/plans"
    2017-05-18 21:12:30.0185 INFO Verify plan item count should equal "3"
    2017-05-18 21:12:30.1197 INFO Verify "1st" plan item's "Title" <h3> heading content should equal "Basic"
    2017-05-18 21:12:30.2003 INFO Verify "1st" plan item's "Price" element content should equal "$0.00"
    2017-05-18 21:12:30.2646 INFO Verify "1st" plan item's "Number Of Projects" element content should equal "1"
    2017-05-18 21:12:30.3275 INFO Verify "1st" plan item feature list should equal sequence <"Feature 1", "Feature 2">
    2017-05-18 21:12:30.4231 INFO Verify "2nd" plan item's "Title" <h3> heading content should equal "Plus"
    2017-05-18 21:12:30.4921 INFO Verify "2nd" plan item's "Price" element content should equal "$19.99"
    2017-05-18 21:12:30.5482 INFO Verify "2nd" plan item's "Number Of Projects" element content should equal "3"
    2017-05-18 21:12:30.6094 INFO Verify "2nd" plan item feature list should equal sequence <"Feature 1", "Feature 2", "Feature 3", "Feature 4">
    2017-05-18 21:12:30.7601 INFO Verify "3rd" plan item's "Title" <h3> heading content should equal "Premium"
    2017-05-18 21:12:30.8293 INFO Verify "3rd" plan item's "Price" element content should equal "$49.99"
    2017-05-18 21:12:30.8914 INFO Verify "3rd" plan item's "Number Of Projects" element content should equal "10"
    2017-05-18 21:12:30.9655 INFO Verify "3rd" plan item feature list should equal sequence <"Feature 1", "Feature 2", "Feature 3", "Feature 4", "Feature 5", "Feature 6">
    2017-05-18 21:12:31.1746 INFO Clean up test context
    2017-05-18 21:12:31.2077 INFO Finished test (4.571s)
    2017-05-18 21:12:31.2082 INFO Pure test execution time:  1.968s

    References

    Please feel free to ask any questions regarding Atata framework. Any feedback, issues and feature requests are welcome.

    History

    • March 16, 2017: Initial version posted.
    • April 6, 2017: Minor updates of article content; add Atata Series section.
    • May 18, 2017: Update sample code and sources.

    LEAVE A REPLY