开发移动应用,最耗时耗力的就是手动测试APP的每个功能点或修复bug。有人就会提议App的业务逻辑可以使用nUnit或xUnit测试单元来辅助完成。那用户界面要如何测试?众所周知,移动设备多种多样,数量及其庞大,设备的类型也是各式各样,要如何才能保证App用户界面在成千上百iOS和Android设备中都能正常显示,没有错误?这是很多APP开发人员最头疼的事情了。

 开发移动应用,最耗时耗力的就是手动测试APP的每个功能点或修复bug。有人就会提议App的业务逻辑可以使用nUnit或xUnit测试单元来辅助完成。那用户界面要如何测试?众所周知,移动设备多种多样,数量及其庞大,设备的类型也是各式各样,要如何才能保证App用户界面在成千上百iOS和Android设备中都能正常显示,没有错误?这是很多APP开发人员最头疼的事情了。

今天,本文主要介绍如何使用Xamarin提供的UITest来测试app界面。

clip_image002

访问控件

当使用Xamarin.Forms创建应用程序时,会使用Xamarin.Forms的控件和XAML创建用户界面。运行时,Xamarin.Forms会根据我们创建的用户界面生成对应的原生应用程序。由于我们正在开发针对Xamarin.Forms控件,因此可通过StyleID 特殊属性在Xamarin.UITests中的访问权限。StyleID可以被设置为任意字符串,创建任何测试功能都可以被直接访问,且无论在iOS或Android应用中StyleID都是一致的,这就意味着不需要特别管理这些ID。

XAML

<Button x:Name="ButtonLogin"
        StyleId="ButtonLogin"
        Grid.Row="5"
        BackgroundColor="#F44336"
        BorderRadius="0"
        TextColor="White"
        Text="Login to Meetup"
        Command="{Binding LoginCommand}" />

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, “Courier New”, courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

c#

var buttonLogin = new Button
  {
    StyleId = "ButtonLogin",
    Text = "Login to Meetup",
    BorderRadius = 0,
    TextColor = Color.White,
    BackgroundColor = Color.FromHex("F443336")
  };
 

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, “Courier New”, courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

最后需要做的就是在iOS和Android 应用中添加代码,在原生控件中使用StyleId。这样可以调用Xamarin.UITest。这些代码需要在App的最终版注释掉。

iOS 设置

打开iOS的AppDelegate.cs 文件,在FinishedLaunching方法中添加以下代码:

   1:  Forms.ViewInitialized += (sender, e) =>
   2:  {
   3:    if (null != e.View.StyleId)
   4:    {
   5:      e.NativeView.AccessibilityIdentifier = e.View.StyleId;
   6:    }
   7:  };

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, “Courier New”, courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

Android 设置

打开MainActivity.cs文件,在OnCreate方法中添加以下代码:

   1:  Xamarin.Forms.Forms.ViewInitialized += (sender,  e) =>
   2:  {
   3:    if (!string.IsNullOrWhiteSpace(e.View.StyleId))
   4:    {
   5:      e.NativeView.ContentDescription = e.View.StyleId;
   6:    }
   7:  };

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, “Courier New”, courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

 

现在,可以运行UITest ,打开REPL,则会出现ButtonLogin :

LoginButtonVisible

在UITest,ButtonLogin常用于验证button的交互功能即登录屏幕是否正常出现:

   1:  [Test]
   2:  public void OpenLoginScreen()
   3:  {
   4:    app.Screenshot("App Launches");
   5:    app.Tap("ButtonLogin");
   6:    app.Screenshot("When I tap Login");
   7:    Assert.IsNotNull(app.Query("EntryUserName").Single());
   8:    app.Screenshot("Login Page is Visible");
   9:  }

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, “Courier New”, courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

 

亲们学会了吗?通过本篇文章能够让我们实现APP的用户界面的完美自动化测试!这样可以省时省力,高效提升测试效率!

版权声明:本文为powertoolsteam原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/powertoolsteam/p/4812712.html