Cypress 简明教程
Cypress - jQuery
Cypress 不仅可以使用 get 方法来识别 Web 元素，还可以使用 JQuery 的对象及其方法以及其内部命令。虽然 Cypress 使用 get 方法来识别 Web 元素，但是 JQuery 使用 $() 方法用于相同目的。
Cypress can act upon jQuery objects and its methods along with its internal commands.While Cypress uses the get method to identify a web element, JQuery uses the $() method for the same purpose.
在 Cypress 中，用于识别 Web 元素的命令如下所示——
In Cypress, the command for identifying a web element is as follows −
cy.get('h1#heading')而在 JQuery 中，用于识别 Web 元素的命令如下所示——
Whereas in case of jQuery, the command for identification of a web element is as follows −
$('h1#heading')Cypress 是基于异步特征的 JavaScript。但是，Cypress 命令通过在内部解析 Promise（最终用户不可见）同步执行。
Cypress is based on JavaScript which is of asynchronous nature. However, Cypress commands behave synchronously by resolving the Promise internally, which is hidden from the end user.
但是，当 Cypress 对 JQuery 对象及其方法执行操作时，必须明确地实现 Promise 逻辑，以使得流程同步（借助方法 then）。
Nevertheless, when Cypress acts upon jQuery objects and its methods, the Promise logic has to be implemented specifically, to make flow synchronous (with the help of method then).
例如，当我们想要提取 Web 元素的文本内容（使用 JQuery 方法 - text）时，我们需要使用 then 方法实现 Promise。
For instance, while we want to extract the text content of a web element (with jQuery method - text), we require to implement Promise with the then method.
Promise Implementation in jQuery
以下是 JQuery 中 Promise Cypress 实现的命令——
Following is the command for the Promise Cypress implementation in jQuery −
// test suite
describe('Tutorialspoint', function () {
// it function to identify test
it('Scenario 1', function (){
// test step to launch a URL
cy.visit("https://accounts.google.com")
// Promise implementation with then()
cy.get('h1#headingText').find('span').then(function(e){
//method text to obtain text content
const t = e.text()
expect(t).to.contains('Sign')
})
})
})在 JQuery 中，如果提供的定位符与 DOM 中的任何 Web 元素不匹配，则返回一个空集合。
In jQuery, an empty collection is returned, if the locator which is provided, does not match with any of the web elements in DOM.
为了避免异常，建议验证 $() 产生的 JQuery 集合的长度。命令如下所示——
In order to avoid exceptions, it is recommended to verify the length of the jQuery collection yielded by $(). The command for the same is as follows −
const e = $('#txt')
if (e.length > 0){
//proceed
}但是，如果 DOM 中没有匹配的 Web 元素，则 Cypress 会自动转到重试模式，直到元素可用或超时，如下所示——
However, in case, there are no matching web elements in DOM, the Cypress automatically goes to the retry mode till the element is available or there is a timeout, as shown below −
cy.get('#txt')
.then((e) => { //proceed working on element })该方法会产生一个 Promise。此外，只有当一个 Web 元素与定位符匹配时，该 Promise 才处于已解决模式。如果 Promise 处于拒绝状态，则 then 块中的逻辑将永远不会执行。
The method yields a Promise. Also, the Promise shall be in resolved mode, only if a web element is matched with the locator. If the Promise is in a reject state, the logic within the then block will never be executed.
我们可以在 Cypress 中通过以下表达式访问 JQuery 方法——
We can access jQuery methods in Cypress, with the following expression −
Cypress.$( '#txt'), where #txt is the locator.Implementation of jQuery methods
以下是使用 JQuery 在 Cypress 中识别和执行测试的命令——
Given below is a command for the identification and execution of the test in Cypress with jQuery −
// test suite
describe('Tutorialspoint', function () {
// it function to identify test
it('Scenario 1', function (){
// test step to launch a URL
cy.visit("https://accounts.google.com")
// access web element with Cypress.$
cy.request('/').get('h1#headingText').then(function(e){
Cypress.$(e).find('span')
const t = e.text()
cy.log(t)
})
})
})当执行上述测试时，如果我们打开控制台（按下 F12）并使用表达式 Cypress.$ ('h1#headingText').text() 查找必需的 Web 元素，我们可以验证测试，如下所示——
As the above test is executed, if we open the Console (pressing F12), and find for the required web element, with the expression Cypress.$ ('h1#headingText').text(), we can verify our test, as shown below −
日志消息——登录——是从 Cypress 中的 cy.log 命令获得的。
The log message – Sign –in is obtained from the cy.log command in Cypress.