如何在 cypress 中执行验证？
[英]How to perform validations in cypress?
问题描述
| 中央处理器 | GPU | FPGA | 视觉处理器 |
|---|---|---|---|
| 选项1 | cbutton1 | cbutton2 | cbutton3 |
| 选项2 | 不适用 | xbutton1 | xbutton2 |
| 选项3 | 按钮1 | 不适用 | 不适用 |
我是赛普拉斯的新手，我需要一些硬件验证来编写赛普拉斯测试。 以下是我希望为其编写测试的一些场景：
场景 1：如果选择了来自 CPU 的 option1，则 option2 和 option3 被禁用，我只能 select cbutton1 或 cbutton2 或 cbutton3。 选择 cbutton1 或 cbutton2 或 cbutton3 后，其他按钮将被禁用。
场景 2：如果选择了来自 cpu 的 option2，则 option1 和 option3 被禁用，我只能 select xbutton1 或 xbutton2。 选择 xbutton1 或 xbutton2 后，另一个按钮将被禁用。
场景 3：如果选择了来自 CPU 的 option3，则 option1 和 option2 被禁用，我只能 select abutton1。
<div class="select-row" data-cy-id="config1Row">
<div class="colA">
<h4>1</h4>
</div>
<div class="colB">
<div class="configRow">
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>CPU</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>CPU description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="card" data-cy-id="option1">
<div class="title">i7</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>i7 description!</p>
</div>
</div>
</div>
</div>
<div class="sc-fzozJi cPPA-df padding">
<div class="card" data-cy-id="option2">
<div class="title">Xeon</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>xdescription!</p>
</div>
</div>
</div>
</div>
<div class="sc-fzozJi cPPA-df padding">
<div class="card" data-cy-id="option3">
<div class="title">Atom</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>atom description!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>GPU</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>GPU description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="disabled card" data-cy-id="cbutton1">
<div class="title">Graphics</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>iris description!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>FPGA</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>FPGA description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="disabled card" data-cy-id="button2">
<div class="title">I10</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>Adescription!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>VPU</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>VPU description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="disabled card" data-cy-id="xbutton3">
<div class="title">VPU</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>Mdescription!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1 个解决方案
解决方案1
2 已采纳 2021-02-10 21:28:51
您通常希望设置数据，以便每个场景都出现在表中以进行不同的测试（每个场景一个测试）。 然后只需简单的断言禁用的 class，例如
方案 1
cy.contains('cbutton1').should('not.have.class', 'disabled')
cy.contains('xbutton1').should('have.class', 'disabled')
... // etc
我假设禁用的 class 的存在是测试的关键，这似乎是合乎逻辑的。
如果需要处理很多场景，您也可以以数据驱动的方式执行此操作。
我不确定cy.contains('xbutton1')能否将您带到 go 所需的位置。
在您的 DOM 中，第一个禁用的元素具有<p>iris description!</p> 。 如果这是将显示在表格单元格中的元素，那么
cy.contains('iris description!').should('have.class', 'disabled')
行不通。 您可能必须像这样导航到父级
cy.contains('p', 'iris description!') // more specific, grabs the <p>
.parents('[class="hardwareCardRow"]') // get the parent row
.find('[data-cy-id="cbutton1"]') // go cell that should be disabled
.should('have.class', 'disabled') // assert it is disabled
数据驱动的测试可能看起来像这样
const scenarios = [
{ option: 'Option1', cellText: 'iris description!', disabledItem: 'cbutton1' },
{ option: 'Option2', cellText: 'lily description!', disabledItem: 'cbutton2' },
// etc
}
scenarios.forEach(data => {
it(`should be disabled, testing ${data.option}`, () => { // back-ticks on description
// for template literal
cy.contains('p', data.cellText)
.parents('[class="hardwareCardRow"]')
.find(`[data-cy-id="${data.disabledItem}"]`) // back-ticks on the selector
.should('have.class', 'disabled')
})
})
如何使用Firebase根据查询结果执行服务器验证？
[英]How to perform server validations based on query results with Firebase?
如何使用赛普拉斯授权标头中收到的令牌执行“重定向”？
[英]How to perform 'redirect' with token received in authorisation headers in Cypress?
赛普拉斯：如何在不受控制的前端React应用和第三方API（服务器）之间执行测试？
[英]Cypress: How to perform test between my front-end react app and 3rd-party API (server) not under my control?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.