测试基础-页面组成

这两天在带实习生，重新复习了一遍特别基础的东西，也了解了些测试入门过程中的困惑和难点，整理记录一下笔记

 1.自学时看了单个功能的测试用例，现在看到一个完整的页面，我该怎么落点测试用例，无从下手？

因为我本身做过一段时间的APP开发，所以并没有过这个困惑。但根据我自己的经验，我建议测试新人可以从以下一点入手。

微博首页

a.先对整个页面有一定的划分，以微博首页为例

微博首页，一般称做是APP的一级页面；一级页面的特征，打开APP就可以看到，有底部导航条；或直接切换底部导航条就可以直接看到的页面，也可以成为一级页面。

头部：一般的页面头部只有一个标题，右上角有一个按钮；但微博这个比较复杂，包含照相机按钮，关注按钮，推荐，红包按钮，加号按钮

中间：被称为主体，是一个可滑动的有图文的列表。

底部：被称为底部导航条，我们一般以底部导航栏上的按钮把项目分为几个大的模块；例如上图可以说：分为微博首页，视频，发现，消息，我共5个模块。

b.对每个块进行功能测试点拆分，对页面上的东西进行分类

头部功能拆分：

1.按钮：照相机，红包，加号的icon（小图标被称为icon），一般有点击事件的称为按钮。

2.下拉按钮：关注旁边有小三角，点击会出现下图弹框的称为下拉弹框（下拉菜单，下拉筛选框都可以）；点击加号icon出来的也被称为下拉按钮+下拉框；当然还有上拉弹框，例如iOS系统的上滑出设置弹框。

3.tab条：关注和推荐，一般并排展示支持侧滑切换的可以成为tab条；更为典型的是推荐下边的条（懒的截图，可以自己去看）。

微博首页头部下拉框

页面主体拆分

一般的页面主体都是列表，可以上下滑动，上滑可以加载更多，下拉可以刷新。列表会分为不同的块，如下图花泽香菜 和 松鼠视频，就可以成为两个块，中间有灰色分割线。相同类型的块可以在列表滑动时进行复用（技术项），所以我们在写测试用例的时候只需要写不同类型块的用例就好了。例如下图：纯文字的类型，图文的类型，当然还有视频类型等等。PS：一般情况下图文和纯图片还有多图的都会被称为图文，纯文字的要不要归入图文，可以请教对应的移动端开发同学。还有分享评论点赞可以称为功能条。

微博列表

底部拆分

其实底部可以称为APP的基本架构，一般不会进行拆分，测试点比较少。但底部一般只在一级页面展示，二级页面不展示。

测试用例设计就可以按照这种拆分的方式，从上到下的开始入手了。另外别忘了一个测试用例的前置条件和不同状态下的页面情况啦。比如最重要最基础的登录态判断，可以参考微博首页，未登录时一些顶部小按钮的变化，和部分按钮入口的登录态判断。

下期预告：常见的APP控件的测试点梳理 之 弹框