如何测试一个登陆界面

在测试当中,或者面试过程中,都会碰到各种登陆功能,Web或者APP都很普遍。

对于一个登陆页面, 通常有2个Textbox(账号和密码), 一个确定提交按钮 ,如何设计 Test case?

主要考察: 测试者是否熟悉各种测试方法,是否有丰富的App/Web测试经验,以及相关开发经验,以及设计Test case的能力。

虽说很常见,看起来很简单,但是要全面具体也是有一定难度的。

 

  

 

功能测试 (Function test)

  1. 输入正确的用户名和密码,点击提交按钮,验证是否能正确登录
  2. 输入错误的用户名或者密码,  验证登录会失败,是否有相应的错误提示信息
  3. 登录成功后是否跳转到正确的页面
  4. 用户名和密码,如果太短或者太长,应该怎么处理
  5. 用户名和密码,中有特殊字符,和其他非英文的情况
  6. 记住用户名和密码的功能
  7. 登陆失败后,不能记录密码的功能
  8. 用户名和密码输入时前后有空格的处理
  9. 密码是否可见,是否用星号标识

界面测试 (UI Test)

  1. 布局是否合理,2个 Testbox 和一个按钮是否对齐
  2. Testbox和按钮的长度、高度是否复合要求
  3. 界面是否美观
  4. 图片,颜色,字体,超链接,是否都显示正确

性能测试 (performance test)

  1. 打开登录页面,需要几秒
  2. 输入正确的用户名和密码后,登录成功跳转到新页面,不超过5秒
  3. 能支持多少个用户同时登陆

安全性测试 (Security test)

  1. 登录成功后生成的Cookie,是否是httponly (否则容易被脚本盗取)
  2. 用户名和密码是否通过加密的方式,发送给Web服务器
  3. 用户名和密码的验证,应该是用服务器端验证, 而不能单单是在客户端用javascript验证
  4. 用户名和密码的输入框,应该屏蔽SQL 注入攻击
  5. 用户名和密码的的输入框,应该禁止输入脚本 (防止XSS攻击)
  6. 错误登陆的次数限制(防止暴力破解)

可用性测试  (Usability Test)

  1. 是否可以全用键盘操作,是否有快捷键
  2. 输入用户名,密码后按回车,是否可以登陆

兼容性测试(Compatibility Test)

  1. 主流的浏览器下能否显示正常(IE/Edge, Firefox, Chrome, Safari 等)
  2. 不同的平台是否能正常工作,比如Windows, Mac
  3. 移动设备上是否正常工作,比如iPhone, Andriod
  4. 不同的分辨率
  5. 不同的浏览器大小(浏览器最大化, 和非最大化)

软件辅助性测试 (Accessibility test)

软件辅助功能测试是指测试软件是否向残疾用户提供足够的辅助功能

比如高对比度下能否显示正常 (视力不好的人使用)

 

转载于:https://www.cnblogs.com/tangbohu2008/p/11226779.html

<think>好的,用户想用DevEco创建一个登录界面。首先,我需要回忆DevEco Studio的基本使用方法,特别是ArkUI框架的部分,因为之前看到引用[2]里的MineList.ets代码用了@Components和struct,这应该是ArkUI的组件结构。 用户提供的示例代码中,@State装饰器用于管理状态,所以登录界面需要处理用户名和密码的输入,可能需要用到TextInput组件。记得在ArkUI中,布局通常用Column或Row来排列子组件,所以登录表单应该放在Column里,包含两个TextInput和一个按钮。 然后,样式方面,需要设置padding、fontSize、margin等属性,确保界面美观。交互部分,登录按钮需要绑定点击事件,比如调用handleLogin方法,这里可能需要后端接口,但用户可能只需要前端实现,所以暂时用alert提示。 还要考虑引用[2]中的代码结构,确保组件导出正确,build方法里构建视图。另外,输入框的值需要用@State变量来双向绑定,比如username和password,这样输入内容变化时会更新状态。 验证输入是否为空也是一个点,在handleLogin里检查这两个变量,如果为空就提示用户。可能需要添加更多的验证逻辑,比如邮箱格式,但用户的问题可能只需要基础验证。 最后,根据用户提供的引用[2],代码示例中有Column和组件结构,所以在编写登录界面时,可以参照那个结构,替换成需要的组件。同时,确保代码中的import语句正确,比如是否需要引入其他模块。 总结步骤:创建新页面,使用Column布局,添加Text和TextInput组件,绑定状态变量,添加登录按钮及其事件处理,样式调整,输入验证。完成后,测试界面是否正常显示和交互。</think>### 使用 DevEco 创建登录界面的步骤 #### 1. **创建新页面** 在 DevEco Studio 中新建一个 `.ets` 文件(如 `LoginPage.ets`),使用 ArkUI 框架的组件化结构: ```typescript @Component export default struct LoginPage { @State username: string = ''; @State password: string = ''; build() { Column() { // 标题 Text('用户登录') .fontSize(24) .margin({ bottom: 40 }); // 用户名输入框 TextInput({ placeholder: '请输入用户名' }) .width('80%') .height(40) .margin({ bottom: 20 }) .onChange((value: string) => { this.username = value; }); // 密码输入框 TextInput({ placeholder: '请输入密码' }) .width('80%') .height(40) .type(InputType.Password) .margin({ bottom: 30 }) .onChange((value: string) => { this.password = value; }); // 登录按钮 Button('登录') .width('50%') .height(40) .backgroundColor('#007DFF') .onClick(() => { this.handleLogin(); }); } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } // 登录逻辑 private handleLogin() { if (this.username && this.password) { // 调用登录接口(需补充具体逻辑) alert('登录成功'); } else { alert('用户名或密码不能为空'); } } } ``` #### 2. **关键功能说明** - **组件结构**:通过 `Column` 垂直排列标题、输入框和按钮,引用[2]中类似布局。 - **双向绑定**:`@State` 修饰的变量 `username` 和 `password` 实现输入框与数据的同步。 - **输入类型控制**:密码框使用 `InputType.Password` 隐藏输入内容。 - **事件处理**:`onClick` 绑定登录按钮的点击事件,触发输入验证。 #### 3. **样式优化建议** - 添加背景颜色或图片:通过 `.backgroundColor()` 或 `Image` 组件。 - 输入框边框样式:使用 `.border({ width: 1, color: '#CCCCCC' })`。 - 错误提示:通过 `if` 条件渲染错误消息组件。 #### 4. **界面跳转集成** 在入口文件(如 `MainPage.ets`)中调用登录页面: ```typescript import LoginPage from './LoginPage' @Entry @Component struct MainPage { build() { LoginPage() } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值