# Cypress 的学习笔记

+关注继续查看

cypress 的 语法，cy.get(’.my-selector’)，很像jQuery: cy.get(’.my-selector’)

ct.get 并不会像 jQuery 那样，采用同步的方式返回待读取的元素。Cypress 的元素访问，采取异步方式完成。

Cypress 命令并不会直接返回其工作的目标，而是 yield 这些目标。Cypress 命令以异步的方式执行，命令被插入到队列里，并不会立即执行，而是等待调度。当命令真正执行时，目标对象经由前一个命令生成，然后传入下一个命令里。命令与命令之间，执行了很多有用的 Cypress 代码，以确保命令执行顺序和其在 Cypress 测试代码里调用的顺序一致。

Cypress 提供了一种叫做 aliasing 的机制，能将元素引用保存下来，以备将来之用。

# Cypress 的异步执行特性

Each Cypress command (and chain of commands) returns immediately

Having only been appended to a queue of commands to be executed at a later time.

You purposefully cannot do anything useful with the return value from a command. Commands are enqueued and managed entirely behind the scenes.

We’ve designed our API this way because the DOM is a highly mutable object that constantly goes stale. For Cypress to prevent flake, and know when to proceed, we manage commands in a highly controlled deterministic way.

Cypress API 如此设计的原因是，DOM 是一种易变对象，随着用户操作或者交互，状态经常会 go stale. 为了避免出现 flake 情形，Cypress 遵循了上文描述的思路，以一种高度可控，确定性的方式来管理命令执行。

The above test keeps adding more cy.get(’#result’) commands to the test chain without executing any!

The chain of commands keeps growing, but never executes - since the test function never finishes running.

The while loop never allows Cypress to start executing even the very first cy.get(…) command.

# command 执行过程中背后发生的事情

5 个 步骤的例子：

Visit a URL.

Find an element by its selector.

Perform a click action on that element.

Grab the URL.

Assert the URL to include a specific string.

Visit a URL

Find an element by its selector

Perform a click action on that element

https://docs.cypress.io/guides/references/configuration

Commands are promise

This is the big secret of Cypress: we’ve taken our favorite pattern for composing JavaScript code, Promises, and built them right into the fabric of Cypress. Above, when we say we’re enqueuing actions to be taken later, we could restate that as “adding Promises to a chain of Promises”.

Cypress 在 promise 编程模式的基础上，增添了 retry 机制。

You can think of Cypress as “queueing” every command. Eventually they’ll get run and in the exact order they were used, 100% of the time.

Cypress 的命令执行顺序和其被插入 test chain 队列的顺序完全一致。

How do I create conditional control flow, using if/else? So that if an element does (or doesn’t) exist, I choose what to do?

The problem with this question is that this type of conditional control flow ends up being non-deterministic. This means it’s impossible for a script (or robot), to follow it 100% consistently.

After clicking on this , I expect its class to eventually be active.

This above test will pass even if the .active class is applied to the button asynchronously - or after a indeterminate period of time.

Cypress 会不断重试上述的 assertion，直至 .active class 被添加到 button 上，不管是通过异步添加，还是在一段未知长度的时间段后。

What makes Cypress unique from other testing tools is that commands automatically retry their assertions. In fact, they will look “downstream” at what you’re expressing and modify their behavior to make your assertions pass.

You should think of assertions as guards.

Use your guards to describe what your application should look like, and Cypress will automatically block, wait, and retry until it reaches that state.

Cypress 命令默认的 assertion 机制

With Cypress, you don’t have to assert to have a useful test. Even without assertions, a few lines of Cypress can ensure thousands of lines of code are working properly across the client and server!

This is because many commands have a built in Default Assertion which offer you a high level of guarantee.

cy.visit() expects the page to send text/html content with a 200 status code. 确保 页面发出 text/html 内容后，收到200 的状态码。

cy.request() expects the remote server to exist and provide a response.

cy.contains() expects the element with content to eventually exist in the DOM.

cy.get() expects the element to eventually exist in the DOM.

.find() also expects the element to eventually exist in the DOM. - 同 cy.get

.type() expects the element to eventually be in a typeable state.

.click() expects the element to eventually be in an actionable state.

.its() expects to eventually find a property on the current subject.

All DOM based commands automatically wait for their elements to exist in the DOM.

# Cypress 命令自带的超时设置Queries for the element .mobile-nav, 然后停顿 4 秒，直至元素出现在 DOM 里。

DevExpress学习02——DevExpress 14.1的汉化

1215 0
DevExpress学习03——label控件的背景色问题

975 0
DevExpress学习01——下载与安装

1420 0

10883 0
MapReduce编程实现学习
MapReduce主要包括两个阶段：一个是Map，一个是Reduce. 每一步都有key-value对作为输入和输出。 　　Map阶段的key-value对的格式是由输入的格式决定的，如果是默认的TextInputFormat,则每行作为一个记录进程处理，其中key为此行的开头相对文件的起始位置，value就是此行的字符文本。
707 0
+关注
1727

0

+ 订阅

《2021云上架构与运维峰会演讲合集》

《零基础CSS入门教程》

《零基础HTML入门教程》