Cypress操作建议与封装说明

前端代码修改

前端修改建议：

• 对于不是以button 申明的按钮，例如：首页中的登录按钮。最好为其设置id属性。
• 菜单选项使用contain方法输入菜单项名称获取该元素时是无法选中的，因此建议为菜单中每个元素以菜单项名称为值添加id属性。
• 一般获取较为复杂的标签，均建议为其添加id。

元素获取

获取元素方式：Cypress中对于元素的获取的方式CSS中的选择器方式类似，目前采用最多的方式如下。

cy.get("选择器")
cy.contain("标签内容")

但由于页面中大部分的标签缺乏id属性，采用get的方式很难直接定位到该元素上。为此，在这推荐直接采用contain直接获取标签内容的形式来获取元素。

//例如
cy.contains("账号登录")
cy.contains("登 录")

元素获取步骤：

1. 缩小元素所在的范围（防止使用contains获取元素时，定位到多个元素造成元素无法获取。）。一般是菜单、搜索栏、输入表单项等。
2. 从这个范围里面定位具体的元素。

在这对获取方式进行了如下总结：(使用封装函数获取会直接返回DOM对象，之后需要对获取到的对象执行相关的操作)

• button按钮：推荐直接采用contains方法的方式直接获取该按钮（列表中的编辑、删除等按钮除外）。但需要注意的是，页面中的按钮名称通常情况下都会存在 ，在contains方法中直接采用空格代替。

  //使用contains方法获取button按钮
  	//步骤：
  		1.先使用get获取某一功能区的DOM对象。
  		2.在这个DOM对象中根据按钮名称找到相应			的按钮
  	//示例：找到搜索栏中的新增按钮
  		cy.get(".ant-form-inline ").contains("button","新 增")	
  

原因：contain方法匹配采用模糊匹配，只要含有该内容匹配，多条匹配取第一条。

• 菜单列表：在iot管理系统中对于菜单的选择为其封装了相应的函数，可以直接调用getMenuItem()选择菜单，若菜单中存在多选可以结合contains使用。具体使用见下方说明。

  //示例：找到表单中的“网关管理”选项下值为“型号列表”的多选框项
  	getMenuItem("网关管理").contains("型号列表")
  

• 搜索框：在系统中，对于搜索框的选择可以直接使用contains()选择输入框，dropDownOption()选择下拉框。

  	//搜索栏中的元素都放在class属性值为ant-form-inline的一个表单标签中，所以要获取表单中的一个新增按钮可以参考如下方法：
  	cy.get(".ant-form-inline").contains("button","新 增")
  	
  

• 弹窗输入框：推荐直接使用封装函数modal()获取表单弹窗，结合原生的contains方法获取具体的输入框。对于其中可能出现的下拉框也能够直接使用dropDownBox()来选中下拉框中的选项。

  //modal()函数会返回整个弹窗的DOM对象。为此，例如，要想获得输入弹窗中的“网关名称”这一栏的输入框，可以参考以下写法：
  modal().contains(".ant-form-item","网关名称")
  

• 表格操作：对于系统中读取到的每一行数据，需要对其进行编辑、删除或密码重置等操作的选择时，可以使用getRow()来选择特定行，结合原生contains方法选择特定操作。

  //代码示例:获取第一行数据中的编辑按钮
  getRow(1).contains("button","编 辑")
  

• 断言：对于编辑、创建、删除以及查询操作是否成功的判断可以直接使用封装好的断言函数。如下

  //用于判断编辑、创建是否成功
  isSavedSuccess()
  //用于判断删除是否成功
  isDelSuccess()
  //用于判断查询结果是否正确
  isSearchCorrect()
  

• 其他：若使用contains方法不能直接匹配内容获取或没有相应封装函数获取操作的话，推荐直接在相应标签中为其添加id，在获取元素时直接使用id选择器进行选择。

  //表单、多选框文本框、验证码按钮其id值可以采用item.prop中的值
  //例子
  cy.get("gatewayTypeName")
  //有些按钮不能使用contains方法获取，可以直接在`<a-button></a-button>`标签属性位置添加id值。
  
  //例如：
  //新增按钮对应id：add-*
  	新增型号：add-type
  	新增网关：add-gateway
  	新增网关厂商：add-gatewayFirm
  	新增用户：add-user
  //保存按钮id：save-*。*表示不同页面的名称
  	保存型号：save-type
  	保存网关：save-gateway
  	保存网关厂商：save-gatewayFirm
  	保存用户：save-user
  

Cypress操作封装函数定义

• getMenuItem（menuItemName）函数：用于点击系统中的菜单图标，选择相应的选项。menuItemName参数：用于传递要选择的选项，以字符串的形式。

  //代码示例
  getMenuItem("网关管理")
  //说明：以上操作会点击菜单图标后，选择菜单中网关管理这个选项对应的标签返回
  

• getRow（row）函数：用于选择表格中的一行信。row参数表示要进行操作的行号；

  //代码示例
  getRow(1)
  //说明：以上代码会选择列表中的第一行数据，返回其相应的DOM对象
  

• isSavedSuccess（promptContent）函数：用于判断编辑、创建信息是否成功的断言。promptContent参数表示成功的提示信息，以字符串形式输入。

  //代码示例
  isSavedSuccess("创建成功")
  //说明：以上代码会拿到操作结果的提示信息，与我们输入的目标提示信息进行比对，是个断言操作
  

• isDelSuccess（promptContent）函数：用于判断删除操作是否成功的断言。promptContent参数表示成功的提示信息，以字符串形式输入。

  //代码示例
  isDelSuccess("删除成功")
  //说明：以上代码会拿到操作结果的提示信息，与我们输入的目标提示信息进行比对，是个断言操作
  

• isSearchCorrect（searchResult）函数：用于判断查询结果是否正确的断言。searchResult参数表示查询返回的结果数，以字符串形式输入。

  //代码示例
  isSearchCorrect("1")
  //说明：以上代码会计算查询显示的结果数，与我们输入的目标数量进行比较，是个断言操作
  

• dropDownOption（optionName）函数：用于表单中下拉多选框的选择。optionName参数表示要选择的对象名称，以字符串形式输入。

  //代码示例
  dropDownOption("水厂网关")
  //说明：以上代码会在表单中的多选框里选择一个内容为水厂网关的标签
  

• popover（）函数：用于获取确认弹窗。

  //代码示例
  popover()
  //说明：以上代码会返回在删除操作时提示的确认弹窗。
  

• modal（）函数：用于获取信息输入框。

  	//代码示例
  	modal()
  	//说明：以上代码会返回新增或编辑操作时弹出的输入框