skyline-console/3-3-E2E-detail-operation.md at master

3.3 KiB

Raw Permalink Blame History

简体中文 | English

因为前端框架使用的一致性，我们在编写详情操作的相关用例，选取元素并进行操作时，往往会发现有很强的规律性，所以我们对大多数详情操作都编写了相应的 Cypress 函数，极大的减少了编写测试用例的难度，以下会对主要使用的表格操作函数做出详细的说明。

checkDetailName

验证详情页头部包含指定资源名称
参数name，资源名称

以查看密钥详情test/e2e/integration/pages/compute/keypair.spec.js为例

it('successfully detail', () => {
    cy.tableSearchText(name)
    .checkTableFirstRow(name)
    .goToDetail()
    .checkDetailName(name);
    cy.goBackToList(listUrl);
});

goBackToList
- 点击详情页的返回按钮，进入列表页，并等待列表加载完成
- 参数url，列表url
  - 如果设置，会验证返回的列表路由是否符合预期
- 以查看密钥详情test/e2e/integration/pages/compute/keypair.spec.js为例
  1. 搜索
  2. 验证表格第一行是否包含指定名称
  3. 进入详情页
  4. 验证详情页的名称
  5. 返回列表页
```
it('successfully detail', () => {
    cy.tableSearchText(name)
    .checkTableFirstRow(name)
    .goToDetail()
    .checkDetailName(name);
    cy.goBackToList(listUrl);
});
```
goBackToList
- 点击详情页的返回按钮，进入列表页，并等待列表加载完成
- 参数url，列表url
  - 如果设置，会验证返回的列表路由是否符合预期
- 以查看密钥详情test/e2e/integration/pages/compute/keypair.spec.js为例
  1. 搜索
  2. 验证表格第一行是否包含指定名称
  3. 进入详情页
  4. 验证详情页的名称
  5. 返回列表页
```
it('successfully detail', () => {
    cy.tableSearchText(name)
    .checkTableFirstRow(name)
    .goToDetail()
    .checkDetailName(name);
    cy.goBackToList(listUrl);
});
```
clickDetailTab
- 点击详情页下方的指定Tab标签，并等待相关资源列表加载完成
- 参数label，指定的Tab标签
- 参数urlTab，路由中的tab属性
  - 如果设置，会验证切换标签后路由中的tab属性是否符合预期
- 参数waitTime，切换标签后的等待时间
- 以查看网络详情test/e2e/integration/pages/network/network.spec.js为例
  1. 搜索
  2. 验证表格第一行是否包含指定名称
  3. 进入详情页
  4. 验证详情页的名称
  5. 点击子网Tab，并等待列表加载完成
  6. 点击端口Tab，并等待列表加载完成
  7. 返回列表页
```
it('successfully detail', () => {
  cy.tableSearchText(name)
    .checkTableFirstRow(name)
    .goToDetail()
    .checkDetailName(name);
  cy.clickDetailTab('Subnets', 'subnets').clickDetailTab('Ports', 'ports');
  cy.goBackToList(listUrl);
});
```

对详情页主要用到了上方介绍的函数，函数的具体编写，请查看test/e2e/support/detail-commands.js

3.3 KiB Raw Permalink Blame History Unescape Escape

3.3 KiB

Raw Permalink Blame History