deep dive modern apps lifecycle with visual studio 2012: how to create cross browser test automation...

33
How to create cross browser test automation using Coded UI Testing

Upload: microsoft-developer-network-msdn-belgium-and-luxembourg

Post on 05-Feb-2015

2.157 views

Category:

Documents


6 download

DESCRIPTION

More info on techdays.be

TRANSCRIPT

Page 1: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

How to create cross browser test automation using Coded UI Testing

Page 2: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

How to create cross browser test automation using Coded UI TestingMarcel de Vries & Tim Mahy

Page 3: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Agenda

Test automation with visual Studio 2012Coded UI tests

Technologies supportedHow does CodedUI find the objects?Multi browser support

Maintainability of your testsBDD style testing and MTMBDD style testing and CodedUIPage object patternBDD style testing and CodedUI revisited

Running your test automation from MTM and the buildSummary

Page 4: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Test Automation Pyramid & VS

Maintainable Coded UI Tests (CUITs) met VS2012 4

GUI Tests

Acceptance Tests (API

Layer)

Unit Tests / Component Tests

Manual Tests

Test Cases & Shared Steps

Coded UI Tests

Unit Tests

Unit Tests

Page 5: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Introduction into CodedUI

Microsoft Framework to implement Test autmationCodedUI tests are based on the MSTest FrameworkIt supports different UI technologies

Web BrowserWPF applicationsWinForms applicationsSilverlight applications (Microsoft Visual Studio UI Test Plugin for

Silverlight)\

Page 6: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Searching for controls

CodedUI uses the search properties of the control first to find the control relative to the specified parent controlIf a Search results in multiple controles then the Filter Properties are appliedIf a Search results in 1 control, then search properties are ignored

Search of controls works best if they can be easily identifiedBest practice: For web controls always give controls an “id” attributeFor other technologies, add an AutomationPeer to the control

Page 7: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Supported technologies

IE8, 9 & 10 on Windows 7, 8Chrome, firefox Silverlight 4 & 5 in IE 8,9 & 10Windows forms 2.0WPF fully supportedSharePointDynamics CRM

Page 8: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Test automation with Visual Studio 2012

Cross browser support:”Selenium components for Cross Browser “: http://bit.ly/vs2012crossbrowser

Page 9: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Demo: Generating code from existing tests & recorder

Page 10: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Wait for specific events

WaitForControlReady

WaitForControlEnabled

WaitForControlNotExist

WaitForControlPropertyEqual

WaitForControlPropertyNotEqual

WaitForControlCondition (Predicate)

WaitForCondition (Predicate)

The methods return true if the wait is successful and false if the wait failed.

•The implicit timeout for the wait operation is specified by WaitForReadyTimeout property

use the Playback.Wait() instead of Thread.Sleep() API

Page 11: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Data Driven tests

Data sets can be used to drive the UITestsDifferent Data Sources available

CSVXMLExcelTest Case in MTMSQL Server

Use the TestContext to get the data rowsstring paramVal = TestContext.DataRow["Input1"]

Page 12: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Data Source attributes

[DataSource("Microsoft.VisualStudio.TestTools.DataSource.CSV", "|DataDirectory|\\data.csv", "data#csv", DataAccessMethod.Sequential), DeploymentItem("data.csv"), TestMethod]

DataSource("System.Data.Odbc", "Dsn=Excel Files;Driver={Microsoft Excel Driver (*.xls)};dbq=|DataDirectory|\\Data.xls;defaultdir=.;driverid=790;maxbuffersize=2048;pagetimeout=5;readonly=true", "Sheet1$", DataAccessMethod.Sequential), TestMethod]

[DataSource("Microsoft.VisualStudio.TestTools.DataSource.TestCase", "http://vlm13261329:8080/tfs/DefaultCollection;Agile", "30", DataAccessMethod.Sequential), TestMethod]

[DataSource("Microsoft.VisualStudio.TestTools.DataSource.XML", "|DataDirectory|\\data.xml", "Iterations", DataAccessMethod.Sequential), DeploymentItem("data.xml"), TestMethod]

[DataSource("System.Data.SqlClient", "Data Source=.\\sqlexpress;Initial Catalog=tempdb;Integrated Security=True", "Data", DataAccessMethod.Sequential), TestMethod]

CSVExcel

MTM

SQL

XML

Page 13: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

DemoData Driven Tests

Page 14: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD

Page 15: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD

Context

Event

Response

Given

When

Then

Page 16: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD style acceptance test specification

Scenario 1: Wrong selected Items should be removable from shopping cart

Given a customer added an article to his shopping cartWhen the customer navigates to the shopping cartThen he should be able to remove the item from the basket

Scenario 2: Wrong number of items should be correctableGiven a customer added an article to his shopping cartAnd he increased the quantity of the articleWhen the customer navigates to the shopping cartThen he should be able to decrease the quantity of the article

In order to correct wrong items in my shopping cart As a customer I should be able to correct items in my shopping car cart. User Story /

Feature

Acceptance Criteria

Acceptance Criteria

Page 17: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD

• The language is used by all team members!

• Given, when, then... can be seen as keywords for the domain language.

• It’s a captured conversation

• Simple

Page 18: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Demo

behaviors as shared steps

Page 19: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Demo

Code first

Page 20: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Making test readable & reusable

Page Objects= UIMap

Create multiple (per page for example)Technical interface for interacting with the pages

Maintainable Coded UI Tests (CUITs) met VS2012 20

Page Object• UI Control • UI Action

Pagina Test Script

Shared Step

Page 21: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Code first - extensions

http://codeduicodefirst.codeplex.com/

Page 22: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD - frameworks

http://www.specflow.org

Page 23: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD - frameworks

http://www.specflow.org

Page 24: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD - frameworks

http://www.specflow.org

Page 25: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

BDD - frameworks

http://www.specflow.org

Page 26: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

How to enable cross browser testing Data driven or using MTM configurations

Page 27: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

MTM has the notion of Configurations

Page 28: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Autmated run in MTM pushes data to TestContext.Properties[]

__Tfs_IsInLabEnvironment__ True__Tfs_TestRunId__ 22__Tfs_TestCaseId__ 117__Tfs_TeamProject__ MyTeamProjectName

__Tfs_BuildDirectory__\\vsalm\ffdrops\New Build Definition 1\New Build Definition 1_20130222.7

__Tfs_LabEnvironment__

<?xml version=”1.0″ encoding=”utf-16″?><LabEnvironment Id=”5f37b167-ad24-4f7e-bb1e-2e65a3e71a1f” Name=”Windows 7 Client” Uri=”vstfs:///LabManagement/LabEnvironment/2″><LabSystems><LabSystem Name=”TestClient” ComputerName=”TestClient” Roles=”Desktop Client”><CustomProperties /></LabSystem></LabSystems></LabEnvironment>

__Tfs_TestConfigurationId__ 2__Tfs_TestPlanId__ 4__Tfs_TestConfigurationName__ Chrome__Tfs_TestPointId__ 12__Tfs_TfsServerCollectionUrl__ http://vsalm:8080/tfs/fabrikamfibercollection__Tfs_BuildPlatform__ Any CPU__Tfs_BuildNumber__ New Build Definition 1_20130222.7__Tfs_BuildFlavor__ Debug__Tfs_BuildConfigurationId__ 22

Page 29: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Initialize your test

[TestInitialize] public void TestInitialize() { if (TestContext.Properties["__Tfs_TestConfigurationName__"] != null) { string selectedBrowser =

TestContext.Properties["__Tfs_TestConfigurationName__"].ToString(); Debug.WriteLine(string.Format("Selected browser configuration

'__Tfs_TEstConfigurationName__' == {0}",selectedBrowser));

if (!string.IsNullOrEmpty(selectedBrowser)) { // check if we selected IE, Firefox or chrome if (selectedBrowser == "IE") return; BrowserWindow.CurrentBrowser = selectedBrowser; } } }

Page 30: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Demo

Switch browser based on configurations

Page 31: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

If time permits:Lab build with MTM test runs

Page 32: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Summary

Test automation with visual Studio 2012Coded UI tests

Technologies supportedHow does CodedUI find the objects?Multi browser support

Maintainability of your testsBDD style testing and MTMBDD style testing and CodedUIPage object patternBDD style testing and CodedUI revisited

Running your test automation from MTM and the buildCall to Action

Page 33: Deep Dive Modern Apps Lifecycle with Visual Studio 2012: How to create cross browser test automation using Coded UI Testing

Questions &

answers