{"id":4785,"date":"2018-07-13T10:16:50","date_gmt":"2018-07-13T17:16:50","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vsappcenter\/?p=4785"},"modified":"2019-02-16T15:30:13","modified_gmt":"2019-02-16T22:30:13","slug":"visual-ui-testing-for-android-apps-with-espresso-and-studio-app-center","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/appcenter\/visual-ui-testing-for-android-apps-with-espresso-and-studio-app-center\/","title":{"rendered":"Visual UI Testing for Android Apps with Espresso and Visual Studio App Center"},"content":{"rendered":"

This is a guest post from Daniel Puterman, engineering lead at Applitools.<\/em><\/p>\n

Suppose you\u2019ve built a new Android app and want to build some visual test automation scripts to ensure that it appears correctly on the devices it might run on. Not all the Android devices out there<\/a> \u2014 just the top 20 for now. Suppose further that your app isn\u2019t all that complex; just ten screens, with an average of ten visual elements each. And you won\u2019t check every last attribute of those visual elements, just five: x, y position, height, width, and text. <\/p>\n

Simple, right?<\/p>\n

Unfortunately, no. <\/p>\n

If you apply traditional functional testing techniques to visual testing, you just signed yourself up for writing test automation code with 10,000 checkpoints<\/strong> (= 20 devices * 10 screens * 10 elements * 5 attributes).<\/p>\n

Of course, there\u2019s no way you\u2019re going to write 10,000 lines of checkpoint code. That could be more than all the code in your Android app itself. So you cut corners. Reduce your test matrix. Write less validation code.<\/p>\n

But then your users find bugs in production, on a platform you didn\u2019t test on.<\/p>\n

It\u2019s a dilemma that developers face regularly: Spend all your time writing test code, or scramble to fix production bugs.<\/p>\n

Luckily, there\u2019s a way to make it simpler with visual UI testing, which uses artificial intelligence to test an entire screen\u2019s visual appearance with just one API call. With this approach, 200 lines of test code is all that\u2019s needed to test on 20 devices and ten screens.<\/p>\n

In this tutorial, you\u2019ll learn how to build and run a visual user interface test of a native Android mobile app using the following tools: Espresso<\/a>, Visual Studio App Center<\/a>, and Applitools<\/a>. <\/p>\n

As an engineering lead at Applitools, I rely on visual UI testing for many apps and will cover the following topics:<\/p>\n

    \n
  1. A quick introduction to visual UI testing <\/li>\n
  2. Preparing the Ground <\/li>\n
  3. Run your first mobile visual UI test on Visual Studio App Center <\/li>\n<\/ol>\n

    Get Started with Visual UI Testing<\/h2>\n

    If you\u2019re not familiar with visual UI testing, here\u2019s a brief introduction.<\/p>\n

    Here\u2019s the Hello World app from Applitools\u2019 \u201cGetting Started\u201d guide for the Espresso SDK:<\/a><\/p>\n

    \"\"<\/p>\n

    How would you test this? You could verify that a button exists and 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? The position of the button? What about the rest of the elements? <\/p>\n

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

    Visual testing solves this problem easily. Let\u2019s show you how using Espresso<\/a>, App Center<\/a>, and Applitools<\/a>.<\/p>\n

    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. The known good baseline version is on the left; the new test build, on the right. Visual differences are detected automatically using Applitools\u2019 AI and highlighted in magenta:\n \n\"\"\n \nSince visual tests capture the entire screen — not just what\u2019s in the viewport<\/a>, but also content the user needs to scroll in order to view — we have validated the entire<\/strong> application while we ran the tests.<\/p>\n

      The command which validates the entire screen is:<\/p>\n

       \neyes.checkWindow(\"Hello World screen\");<\/em>\n<\/pre>\n
      That\u2019s a lot easier than writing dozens of lines of checkpoint code, right?<\/p>\n
      If you agree, let\u2019s dive into how to get this working with Espresso, Visual Studio App Center, and Applitools.<\/p>\n
      Preparing the Ground<\/h2>\n
      You\u2019ll need this software to get started:<\/p>\n