条件测试用下列的编程范式可以清晰表示出来：

If X, then Y, else Z

如今，现代 JavaScript 应用程序是高度动态和可变的。它们的状态和 DOM 在一段时间内不断变化。

条件测试的问题在于它只能在状态稳定后才能使用。在现代应用程序中，知道状态何时稳定通常是不可能的。

对人类而言——如果从现在起 10 毫秒或 100 毫秒发生变化，我们甚至可能不会注意到这种变化并假设状态总是相同的。

对于机器人来说——即使是 10 毫秒也代表着数十亿+ 的时钟周期。时间尺度的差异令人难以置信。

人也有直觉。如果您单击一个按钮并看到一个加载微调器，您将假定状态处于不断变化中，并会自动等待它完成。

机器人没有直觉——它会完全按照编程的方式去做。

为了说明这一点，让我们举一个简单的例子来尝试有条件地测试不稳定状态。

The DOM is unstable

下面是我们的应用代码，在随机的时间间隔内，将新创建的 button 元素添加 active CSS 类。

// your app code// random amount of time
const random = Math.random() * 100// create a <button> element
const btn = document.createElement('button')// attach it to the body
document.body.appendChild(btn)setTimeout(() => {// add the class active after an indeterminate amount of timebtn.setAttribute('class', 'active')
}, random)

看下面的测试代码：

// your cypress test code
it('does something different based on the class of the button', () => {// RERUN THIS TEST OVER AND OVER AGAIN// AND IT WILL SOMETIMES BE TRUE, AND// SOMETIMES BE FALSE.cy.get('button').then(($btn) => {if ($btn.hasClass('active')) {// do something if it's active} else {// do something else}})
})

我们会随机进入 if 和 else 分支。

Server side rendering

如果 web 应用的源代码在服务器端渲染，并且不存在随后通过 JavaScript 异步修改 DOM 的可能性，这种应用是极佳的进行条件测试的备选。

load 事件发生之后，DOM 不会再发生变化，这意味着其已经达到了一个稳定的状态(a stable state of truth).

Client side rendering

对于现代 Web 应用来说，当 load 事件发生时，屏幕上通常什么都还没有渲染。JavaScript 在此时会动态加载内容，并执行渲染。

这种情况下，不可能依靠 DOM 进行条件测试，除非我们有 100% 的把握，找到某个时间点，该时间点到达时，所有的异步渲染都已经结束，并且也不存在 pending network requests, setTimeouts, intervals, postMessage, or async/await code. 所有的 web 开发者都明白这是一件不可能的事情。

即使我们的应用里使用了 Zone.js, 也没办法捕捉到所有的异步编程点。

A/B campaign

使用 url 参数，显式告诉服务器我们期望返回的数据内容：

// tell your back end server which campaign you want sent
// so you can deterministically know what it is ahead of time
cy.visit('https://app.com?campaign=A')...cy.visit('https://app.com?campaign=B')...cy.visit('https://app.com?campaign=C')

It is crucial that you understand how your application works else you will write flaky tests.

看下面这段代码：

// app code
$('button').on('click', (e) => {// do something synchronously randomlyif (Math.random() < 0.5) {// append an input$('<input />').appendTo($('body'))} else {// or append a textarea$('<textarea />').appendTo($('body'))}
})

应用程序会随机的在 body 里插入 input 或者 textarea.

我们可以使用如下代码进行条件测试：

// click the button causing the new
// elements to appear
cy.get('button').click()
cy.get('body').then(($body) => {// synchronously query from body// to find which element was createdif ($body.find('input').length) {// input was found, do something else herereturn 'input'}// else assume it was textareareturn 'textarea'}).then((selector) => {// selector is a string that represents// the selector we could use to find itcy.get(selector).type(`found the element by selector ${selector}`)})

在应用达到一个稳定的状态前，我们应采取措施，阻止 Cypress 进一步执行命令。

Cypress 的条件测试相关推荐

shell脚本中的特殊变量与if条件测试
1.特殊变量实际工作中我们不可避免的遇到一些xxxx.sh脚本文件,实际阅读shell脚本代码时经常会遇到很多特殊变量(例如:$0.$n.$#.$@.$*.$?.$$等),我们常常会被这些特殊符号折 ...
关于read的例子和条件测试
1.关于read比较两个的大小 #!/bin/sh read -t 10 -p "please input two num:" a b if [ $a -gt $b ]; then ...
Linux01-bash脚本编程之六使用脚本选项及组合条件测试23
练习1,写脚本: 传递3个指定的用户参数,运行脚本自动创建用户:例如:bash admin.sh user1,tom,jack 参考答案:# vim admin.sh #!/bin/bash # ec ...
shell条件测试操作 if分支 for循环 while 循环
目录条件测试操作条件测试的基本用法: 字符串条件测试: 逻辑组合数字的条件测试: 编写一个脚本: 对文件进行测试: if判断语句单分支双分支多分支编写一个脚本: 编写一个脚本: for循 ...
shell脚本详解（二）——条件测试、if语句和case分支语句
shell脚本详解(二)--条件测试.if语句和case分支语句一.条件测试 1.test命令 2.文件测试 3.整数值比较 4.字符串比较 5.逻辑测试二.if条件语句 1.单分支 2.双分支 ...
【Linux学习009】脚本编程之变量、条件测试和条件判断
一.Bash环境变量 bash中变量有四种种类型:环境变量.本地变量(局部变量).位置变量.特殊变量. 1.环境变量环境变量作用范围最广,所有子bash进程都能够访问环境变量中的值,定义环境变量的方 ...
linux条件测试的三种,shell编程之条件测试 | 旺旺知识库
一.条件测试语法: test 测试内容 [ 测试内容 ] ##注意中括号与测试内容间有空格 [[ 测试内容 ]] (( 测试内容 )) ##只能用于测试数值大小,后面详解前三种测试语法 ...
Win32高级语法条件测试语句与分支语句
.if 表达式1 .elseif 表达式2 .else 所以表达式为否 .endf ;if语句结束下面两段程序分别使用汇编语法与高级语法对程序进行条件测试和分支, 弹出对话框当点击"是&q ...
测试必备：if条件测试（ if-else语句、if-elif-else语句、多个elif代码块、省略else代码块、测试多个条件）
目录 if-else语句 if-elif-else语句多个elif代码块省略else代码块测试多个条件 if-else语句以买车票为例,儿童身高超过1.5m就需要买全票,我们可以用 if-el ...

Cypress 的条件测试

The DOM is unstable

Server side rendering

Client side rendering

A/B campaign

Cypress 的条件测试相关推荐

最新文章

热门文章