PageObject

It should allow a software client to do anything and see anything that a human can

  • PageObject到底是个啥

将针对Page的所有操作进行统一封装,如: 输入框中输入内容、点击按钮等

  • E2E的几个痛点

    • 前端调整引起元素定位不到,如

    登录页面的密码输入框的id被程序员不小心给删除了,执行E2E测试过程中就会无法定位到密码输入框,即使有错误提示,你就要找到所有密码输入框并修改密码输入框元素定位

    • 相同的页面操作,要在不同的地方使用,写N次,代码冗余,很不利于后期维护

    用户登录,这样的操作是最常见的。但我们经常会出现在每个需要登录的地方,写一遍用户登录

  • 使用PageObject都可以解决

    • 如果元素定位不到,只需要修改对应的页面的PageObject就好,一处改动,关联的地方都OK了
    • 将相同的页面操作,进行抽离至PageObject中,大大减少代码的冗余

下面我们看一个实践: 如何将页面进行PageObject抽离

分离PageObject

原始代码

public class ExampleInstrumentedTest {


    public static final String STRING_TO_BE_TYPED_EMAIL = "EspressoDemo@mail.com";
    public static final String STRING_TO_BE_TYPED_EMAIL_PASSWORD = "123456";

    @Rule
    public ActivityTestRule<LoginActivity> mActivityRule = new ActivityTestRule<>(
            LoginActivity.class);

    @Test
    public void testAttemptLogin() {
        // Type text and then press the button.
        onView(withId(demo.test.espressodemo.R.id.email))
                .perform(typeText(STRING_TO_BE_TYPED_EMAIL), closeSoftKeyboard());
        onView(withId(demo.test.espressodemo.R.id.email))
                .check(matches(withText(STRING_TO_BE_TYPED_EMAIL)));

        onView(withId(demo.test.espressodemo.R.id.password))
                .perform(typeText(STRING_TO_BE_TYPED_EMAIL_PASSWORD), closeSoftKeyboard());
        onView(withId(demo.test.espressodemo.R.id.password))
                .check(matches(withText(STRING_TO_BE_TYPED_EMAIL_PASSWORD)));

        onView(withId(demo.test.espressodemo.R.id.email_sign_in_button))
                .perform(click());

    }
}

testAttemptLogin中可以看出测试流程是这样

  • 第一步: R.id.email输入内容STRING_TO_BE_TYPED_EMAIL,再验证输入内容是否为STRING_TO_BE_TYPED_EMAIL
  • 第二步: R.id.password输入内容STRING_TO_BE_TYPED_EMAIL_PASSWORD,再验证输入内容是否为STRING_TO_BE_TYPED_EMAIL_PASSWORD
  • 第三步: 点击R.id.email_sign_in_button按钮

这是一个最常见的E2E测试的编写方式,这样的编写方式,明显就一步一步进入了我们上面提的 E2E的几个痛点

分离手术

  • 提取登录PageObject: LoginPageObject
public class LoginPageObject {

    public static void inputEmail(String email){
        onView(withId(demo.test.espressodemo.R.id.email))
                .perform(typeText(email), closeSoftKeyboard());
        onView(withId(demo.test.espressodemo.R.id.email))
                .check(matches(withText(email)));
    }

    public static void inputPassword(String password){
        onView(withId(demo.test.espressodemo.R.id.password))
                .perform(typeText(password), closeSoftKeyboard());
        onView(withId(demo.test.espressodemo.R.id.password))
                .check(matches(withText(password)));
    }

    public static void clickLogin(){
        onView(withId(demo.test.espressodemo.R.id.email_sign_in_button))
                .perform(click());
    }
}
  • 使用登录PageObject来实现之前的测试功能
public class ExampleInstrumentedTest {
    public static final String email = "EspressoDemo@mail.com";
    public static final String password = "123456";

    @Rule
    public ActivityTestRule<LoginActivity> mActivityRule = new ActivityTestRule<>(
            LoginActivity.class);

    @Test
    public void testAttemptLogin() {
        // Type text and then press the button.

        LoginPageObject.inputEmail(email);

        LoginPageObject.inputPassword(password);

        LoginPageObject.clickLogin();

    }
}

至此,PageObject已经分离完成,我们肯定不会到此就结束的,再把测试数据进行分离,便于整体数据的维护

  • 提取用户数据: UserInfo
public class UserInfo {
    public static final String email = "EspressoDemo@mail.com";
    public static final String password = "123456";

}
  • 再次调整测试代码
public class ExampleInstrumentedTest {

    @Rule
    public ActivityTestRule<LoginActivity> mActivityRule = new ActivityTestRule<>(
            LoginActivity.class);

    @Test
    public void testAttemptLogin() {
        // Type text and then press the button.

        LoginPageObject.inputEmail(UserInfo.email);

        LoginPageObject.inputPassword(UserInfo.password);

        LoginPageObject.clickLogin();

    }
}

走到这里,我们会发现,现在的测试很清晰,也很好维护

测试仅有步骤

  • Login输入邮箱地址
  • Login输入密码
  • Login点击登录按钮

有没有发现,这样的测试,更符合业务.

总结

  • 使用PageObject模型后,测试代码更加便于维护,大大增加了可读性,减少了冗余代码
  • PageObject就是将页面的操作行为,进行单独分离和维护,统一管理
  • PageObject/测试数据/测试脚本的关系 关系图
  • 完整代码: https://github.com/aimer1124/EspressoDemo

参考