{"id":37598,"date":"2018-07-30T15:07:52","date_gmt":"2018-07-30T19:07:52","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=37598"},"modified":"2019-03-25T14:24:07","modified_gmt":"2019-03-25T22:24:07","slug":"visual-ui-tests-ios-simulator-using-xamarin-appium","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/visual-ui-tests-ios-simulator-using-xamarin-appium\/","title":{"rendered":"Guest Post: Visual UI tests on iOS simulator using Xamarin and Appium"},"content":{"rendered":"

\t\t\t\tThis is a guest post from Sophie Tagar, a customer support engineer at Applitools<\/a>. Previously, Sophie was a software developer at Matrix Israel where, among other things, she did full stack development using JavaScript and .NET. She is a veteran of the Israeli air force but unfortunately, they only let her touch Oracle ERP and not an F-35 joystick. In her spare time, she enjoys basketball — both playing (shooting guard) and watching (go Dubs!).<\/em><\/p>\n

Visual UI Tests using Xamarin and Appium<\/h2>\n

In this tutorial, you will learn how to integrate automated visual user interface tests into a development toolchain that includes Xcode iOS simulator<\/a> using Xamarin<\/a>, Appium<\/a>, Applitools, and MacOS (formerly OSX).<\/p>\n

We\u2019ll cover the following:<\/p>\n

    \n
  1. A brief introduction to Visual UI Testing<\/li>\n
  2. Preparing your test automation environment<\/li>\n
  3. Writing your test script<\/li>\n
  4. Running your first mobile visual UI test<\/li>\n<\/ol>\n

    What is Visual User Interface Testing<\/h2>\n

    If you\u2019re not yet familiar with automated visual UI testing, more broadly called Application Visual Management<\/a> (or AVM for short).<\/p>\n

    Look at this example of a Hello World application<\/a> available on the Applitool\u2019s website:<\/p>\n

    \"\"<\/p>\n

    How would you test this application? You could verify that a button exists and that the button\u2019s text is \u201cCLICK ME!\u201d. What about the \u201cHELLO WORLD!\u201d title? Again, you can verify the text, but what about the colors? What about the positions of the title element? Of the button? What about the rest of the elements?<\/p>\n

    Without mobile visual testing, you will need to write a lot of validations (also called assertions or checkpoints), one for every property you want to test (content, position, color, etc.). Even then you cannot be sure the final result is displayed properly to the user.<\/p>\n

    Using Visual Testing<\/h3>\n

    Visual testing solves this problem easily. With a single \u201ccheck\u201d command, you verify all<\/strong> these properties for the entire<\/strong> content of the application. So your advantage is double:<\/p>\n

      \n
    1. You don\u2019t need to write a separate assert statement for each element.<\/li>\n
    2. You get full coverage, not just coverage for specific elements.<\/li>\n<\/ol>\n

      The result of visual testing this application using Applitools are shown below; visual differences are highlighted in magenta:<\/p>\n

      \"\"<\/p>\n

      And here are the raw results:<\/p>\n

      \"\"<\/p>\n

      What you see in the images above is an actual fix of a bug in the \u201cHELLO WORLD!\u201d title. The coloring method we used for the \u201cHELLO WORLD!\u201d text did not work for Android 6.0. We identified the bug when we ran visual tests on the demo application, fixed it, then ran our visual tests again to make sure the problem is fixed. This is something we could not have identified any other way.<\/p>\n

      Tthe screens above are just two examples of Applitools\u2019 visual tests Results view<\/a>. The Applitools Test Manager<\/a> includes plenty of other options for analysis and maintenance of visual tests.<\/p>\n

      Even though we only fixed the title, we didn\u2019t have to add new tests or change existing ones. Since visual tests capture the entire screen, not just what\u2019s in the viewport<\/a>, but also content that the user needs to scroll in order to view. We have validated the entire<\/strong> application when we ran the tests, the exact same tests as we had before when setting up our baselines.<\/p>\n

      Here\u2019s what the command which validates the entire screens looks like:<\/p>\n

      eyes.checkWindow(\"Hello World screen\");<\/code><\/p>\n

      Applying Application Visual Management (AVM)<\/h3>\n

      What happens when the application has a lot of screens? What about different devices? This is where Application Visual Management (AVM) comes into the picture. Applitools automatically creates baselines for each environment in which your tests run. When viewing multiple tests, you can group shared differences<\/a>, making it easy to accept\/reject changes all at once. You can also review baseline history<\/a>, perform cross-environment tests<\/a> and more. With Applitools, you can continuously and easily manage your visual baselines. You can read more Visual UI Testing and how do it right on the Applitools website<\/a>.<\/p>\n

      Prepare Your Test Environment<\/h2>\n

      Here are the tools you\u2019ll need to run your automated mobile UI tests.<\/p>\n

      Time:<\/strong> about 45 minutes<\/p>\n

      Software tools to install on your Mac:<\/p>\n