以下屏幕将登在你的电脑上:

气压指挥系统载荷被用来将重点从主页移至框架。 一旦重点转移,我们就能够与框架中的内容互动。

这种方法采用的是机体法。

Implementation

下面是采用环形仪法,对框架进行气旋风暴指挥。

import  cypress-iframe 
describe( Tutorialspoint Test , function () {
   // test case
   it( Test Case6 , function (){
      // launch URL
      cy.visit("https://jqueryui.com/draggable/");
      // frame loading
      cy.frameLoaded( .demo-frame );
      //shifting focus
      cy.iframe().find("#draggable").then(function(t){
         const frmtxt = t.text()
         //assertion to verify text
         expect(frmtxt).to.contains( Drag me around );
         cy.log(frmtxt);
      })
   });
});

产出如下:

执行记录显示,在框架范围内有出入要素,案文在框架中被放弃。

气压无法在一页内处理一个以上的框架。

Also, for frame Intelpsense to Cypress, we can add /// <reference types = "Cypressiframe"/> to the code.

Cypress - Web Tables

风暴能够处理网页。 表格基本上分为两类:动态和静态。 固定表格的栏目和行数与动态表格不同。

在《html法典》中,表格以表格标语表示,而浏览则以斜线表示,栏目按斜线表示。

为了进入各行,Cypress指挥系统如下:

 cy.get("tr")

为进入各栏,Cypress指挥系统如下:

 cy.get("td") or cy.get("tr td")

查阅一栏,特别安全局的表述如下:

td:nth-child(column number)

To iterate through the rows/columns of the table, the Cypress command each is used.

在“旋风”中,我们有“指挥”next至,排在紧接下。 这一指挥必须经过指挥。 突击队被用来转移到前面的兄弟姐妹。

下表的Html结构如下:

Example

让我们以表格为例,并核实第二栏(Open Source)中与价值 Sel相对应的内容,该栏是同OL联系的第一栏。

以下屏幕将登在你的电脑上:

Implementation

下面是实施与表格有关的气旋风暴指挥系统:

describe( Tutorialspoint Test , function () {
   // test case
   it( Scenario 1 , function (){
      //URL launch
      cy.visit("https://sqengineer.com/practice-sites/practice-tables-selenium/")
      // identify first column
      cy.get( #table1> tbody > tr > td:nth-child(1) ).each(($elm, index, $pst)=> {
         // text captured from column1
         const t = $elm.text();
         // matching criteria
         if (t.includes( Selenium )){
            // next sibpng captured
            cy.get( #table1 > tbody > tr > td:nth-child(1) )
            .eq(index).next().then(function(d) {
               // text of following sibpng
               const r = d.text()
               //assertion
               expect(r).to.contains( Commercial );
            })
         }
      })
   });
});

产出如下:

执行记录显示,第1栏所列数值为公开来源。 这是因为紧随同一行的Selenium(第一栏)的精干。

Cypress - Mouse Actions

风暴可以处理隐藏的元素。 有时,子午餐只在主菜的 h上展示。 这些分母最初被藏在CSS财产显示:none。

在处理隐蔽元素时,Cypress利用 j法显示的帮助。 必须在Cypress指挥部的帮助下援引。

例如, on hovering over the Mouse Hover button, the Top and Reload buttons get displayed, as shown below −

在将烟 mo从Mouse Hoverutton移出时,上下游和重载纽托藏起来,如下文所示:

Implementation with jQuery show method

下面是用 j球显示法实施。

describe( Tutorialspoint Test , function () {
   // test case
   it( Scenario 1 , function (){
      // launch URL
      cy.visit("https://learn.letskodeit.com/p/practice");
      // show hidden element with invoke
      cy.get( span.mouse-hover-content ).invoke( show );
      //cpck hidden element
      cy.contains( Top ).cpck();
   });
});

产出如下:

执行记录显示隐藏的元素——托托纽托,由一行代表。

Cypress - Cookies

Cypress处理方法Cookies.pstenOnce()和Cookies.defaults()。 这种方法Cookies.debug()在 co发生任何变化时,可生成对 con的标识。

否则,“Cypress”在每次试验执行之前会拆除所有 co。 我们可以利用Cypress.Cookies.p reservesOnce()保存其姓名的 co,以供其他测试使用。

Syntax

The syntax for the authorities related to the cookies in Cypress are as follows -

如果 co基价值被配置或清除,这将产生ole木。

Cypress.Cookies.debug(enable, option)

这里

• 如果能够减少厨师的.。

选择——没收 co的违约值,例如保存 co。

Cypress.Cookies.debug(true) // logs will generate if cookies are modified
cy.clearCookie( cookie1 )
cy.setCookie( cookie2 ,  val )

减少伐木量。

Cypress.Cookies.debug(true, { verbose: false })
Cypress.Cookies.debug(false) // logs will not generate if cookies are modified

以下的辛迪加将保护 co,在进行另一次试验之前不会予以清除。

Cypress.Cookies.preserveOnce(cookie names...)

这一辛迪加用于改变全球组合,并维持一组用于测试的 co。 任何修改都将适用于这一特定测试(仍保留在cy/支持/指数档案中,并在测试执行之前装上)。

Cypress.Cookies.defaults(option)
Cypress.Cookies.defaults({
   preserve:  cookie1 
})

这里 the cookie named cookie1 will not be cleared before running the test.

Cookie Methods

热带风暴中的一些ok基方法如下:

cy.clearCookies() − It removes all the cookies from present domain and subdomain.

cy.clearCookie(姓名) 它用名称将 co子从浏览器中删除。

cy.getCookie(姓名)- 它用名称从浏览器处获得 co。

cy.getCookies() - 它用于获取所有 co。

cy.setCookie(姓名)- 它可以召集一个厨师。

Implementation

下面是“Cypress”中的 co基方法的实施。

describe( Tutorialspoint Test , function () {
   // test case
   it( Scenario 1 , function (){
      // launch the apppcation
      cy.visit("https://accounts.google.com");
      // enable cookie logging
      Cypress.Cookies.debug(true)
      //set cookie
      cy.setCookie( cookie1 ,  value1 )
      //get cookie by name and verify value
      cy.getCookie( cookie1 ).should( have.property ,  value ,  value1 )
      //clear cookie by name
      cy.clearCookie( cookie )
      //get all cookies
      cy.getCookies()
      //clear all cookies
      cy.clearCookies()
      //verify no cookies
      cy.getCookies().should( be.empty )
   });
});

产出如下:

Cypress - Get and Post

“Get”和“邮政”方法是“应用规划接口”测试的一部分,可由“Cypress”进行。

Get Method

为了开展“公平行动”,我们将以cy.request()提出“吉大港”申请,并将“Get”和“URL”作为这种方法的参数。

如果请求得到接受和正确处理,地位法就反映了这一点。 法典第200(means ok)和201(means 创建)。

Implementation of Get

The implementation of Get methods in Cypress is below -

describe("Get Method", function(){
   it("Scenario 2", function(){
      cy.request("GET", "https://jsonplaceholder.cypress.io/comments", {
      }).then((r) => {
         expect(r.status).to.eq(200)
         expect(r).to.have.property( headers )
         expect(r).to.have.property( duration )
      });
   })
})

产出如下:

Post Method

While using the Post method, we are actually sending information. If we have a group of entities, we can append new ones at the end, with the help of Post.

To perform a Post operation, we shall make a HTTP request with the cy.request() and pass the method Post and URL as parameters to that method.

Implementation of Post

下面是“旋风”中采用邮政方法。

describe("Post Method", function(){
   it("Scenario 3", function(){
      cy.request( https://jsonplaceholder.cypress.io/users?_pmit=1 )
      .its( body.0 ) // yields the first element of the returned pst
      // make a new post on behalf of the user
      cy.request( POST ,  https://jsonplaceholder.cypress.io/posts , {
         title:  Cypress ,
         body:  Automation Tool ,
      })
   })
});

产出如下:

Cypress - File Upload

To perform file upload task in Cypress, we have to first install a plugin with the command mentioned below −

   npm install –dev cypress-file-upload

以下屏幕将登在你的电脑上:

一旦安装完毕,我们就必须在指挥部档案中增加进口气压单上载荷。 这一档案存放在我们“Cypress”项目内。

此外,我们将补充我们想要在固定装置夹中上载的文件(Picture.png文档)。 将展示以下屏幕:

为了上载档案,我们必须使用Cypress指挥系统,并附上File,并将文档作为参数上载。

Implementation

用于在Cypress上载一个档案的指挥系统如下:

describe( Tutorialspoint Test , function () {
   // test case
   it( Test Case6 , function (){
      //file to be uploaded path in project folder
      const p =  Picture.png 
      // launch URL
      cy.visit("https://the-internet.herokuapp.com/upload")
      //upload file with attachFile
      cy.get( #file-upload ).attachFile(p)
      //cpck on upload
      cy.get( #file-submit ).cpck()
      //verify uploaded file
      cy.get( #uploaded-files ).contains( Picture )
   });
});

产出如下:

执行记录显示档案照片。 png got上载,文档名称反映在网页上。

Cypress - Data Driven Testing

在固定装置的帮助下,进行了风化数据驱动测试。 添加气压装置,以保持和掌握自动化测试数据。

固定装置在Cypress项目夹(Example.json文档)内。 基本上,它帮助我们从外部档案中获得数据投入。

气压固定装置的夹可在 Java本末端(JSON)或其他格式有文档,数据以“钥匙:价值”为平。

所有测试数据都可以通过一次以上的测试加以利用。 所有固定装置数据必须在前栏目中公布。

Syntax

The syntax for Cypress data Drive test is as follows -

cy.fixture(path of test data)
cy.fixture(path of test data, encoding type)
cy.fixture(path of test data, opts)
cy.fixture(path of test data, encoding type, options)

这里

编码类型——编码类型(tf-8, asci,等等)用于读文档。

Opts − Modifies the timeout for response. The default value is 30000ms. The wait time for cy.fixture(), prior throws an exception.

Implementation in example.json

下面是采用数据驱动测试。 json in Cypress -

{
   "email": "abctest@gmail.com",
   "password": "Test@123"
}

Implementation of Actual Test

在Cypress实施实际数据驱动测试如下:

describe( Tutorialspoint Test , function () {
   //part of before hook
   before(function(){
      //access fixture data
      cy.fixture( example ).then(function(signInData){
         this.signInData = signInData
      })
   })
   // test case
   it( Test Case1 , function (){
      // launch URL
      cy.visit("https://www.pnkedin.com/")
      //data driven from fixture
      cy.get( #session_key  )
      .type(this.signInData.email)
      cy.get( # session_password ).type(this.signInData.password)
   });
});

产出如下:

产出记录显示,将分送电子邮件和密码田的数值分别为abctest@gmail.com和 Test@123。 这些数据已经通过固定装置进行测试。

Cypress - Prompt Pop-up Window

风暴可以处理迅速的流行窗口,用户可以输入这些窗口的价值。 即时有一个案文领域,即提供投入。 为了处理迅速流行的风.,采用了风云(cy)方法。

它获得迅速标的(翻新窗口)的价值。 在确认/证明人满为患时,我们必须发动一场浏览器活动。 但是,为了迅速普及,我们必须使用cy(cy)方法。

Example

让我们看一下以下例子,在点击Cpck for JS Prompt button时,如以下所示,出现了迅速的登峰。

下面与用户投入领域一起展示。 如下文所示,图西人点迅速进入人口。

你们进入——图兰点是在下台展示的。

可见于下列屏幕上:

Implementation

下面是关于在Cypress——展示迅速流行窗口的指挥系统。

describe( Tutorialspoint Test , function () {
   // test case
   it("Scenario 1", function () {
      //URL launch
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //handpng prompt alert
      cy.window().then(function(p){
         //stubbing prompt window
         cy.stub(p, "prompt").returns("Tutorialspoint");
         // cpck on Cpck for JS Prompt button
         cy.get( :nth-child(3) > button ).cpck()
         // verify apppcation message on cpcking on OK
         cy.get( #result ).contains( You entered: Tutorialspoint )
      });
   });
});   

产出如下:

产出记录显示了对案文的成功核查。

You entered − Tutorialspoint, is produced on cpcking OK button on prompt pop up. Also, the stub appped on the prompt window is visible on the output log.

Cypress - Dashboards

Cypress Dashpad 必须建立这种服务,以便在我们的系统中进行的Cypress检测与云层上的仪表板之间建立联系。

Features

The characteristics of Cypress Dashpad

报告提供了经过、失败和熟练测试案例总数的数据。

对失败测试的分辨率和屏幕可查。

试验执行录像可以提供。

测试数据、框架及其利用的管理是可能的。

提供了该组织的使用趋势。

Setup Cypress Dashboard

为了建立这一进程,首先,我们应当去“声望”试金窗的“龙像”。 然后点击连接达什板。 以下屏幕将显示:

如下文所示,我们将在达什板上获得各种伐木选择:

在成功签署之后,我们将获得成功的信息。 继续。

输入项目名称、所有人和用户,他们可以看到该项目。

接着,点击了立楼项目。

然后,Cypress应提出以下建议:

Id

独特的项目关键(指挥形式将在终端执行)

该项目 从“Cypress”建议获得的Id应当与“电压”中的现有项目匹配。 json file within the Project /61/3er.

其次,我们必须按照“Cypress”的建议,行使以下所述指挥权:

node_modules/cypress/bin/cypress run --record --key <project key>

下面的屏幕显示:

一旦执行,我们就必须开放试验航标表。 它拥有平台、浏览器和测验时间方面的信息。

试验记录应可见。 页: 1

如下文所示,记录以浏览器开启,测试结果概述(计算结果、失败、等待、熟练程度)。

在表象中,我们应了解每次测试的细节及其结果。

此外,还有一些特征,如产出、试样、录像等等。

Cypress - Screenshots and Videos

风暴可以在屏幕和视频上进行。 首先,让我们理解“旋风”如何能够帮助掌握屏幕。

Screenshots

我们既能抓住整页,又能用“旋风”中的屏幕照相。

除此以外,“旋风”还具有内在特征,可捕捉测试失败的屏幕。 为了掌握一个特定情景的屏幕,我们使用了指挥屏幕。

Screenshot Implementation

在Cypress实施屏幕示意图如下:

describe( Tutorialspoint Test , function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //complete page screenshot with filename - CompletePage
      cy.screenshot( CompletePage )
      //screenshot of particular element
      cy.get( :nth-child(2) > button ).screenshot()
   });
});

产出如下:

执行记录显示,收集了完整的页面屏幕(档案名称为完整分类.png),并放映了某一特定内容(JS Confirm)。

These screenshots got captured inside the screenshots folder (in the plugins folder) within the project. The location where the screenshots got captured, can be modified by changing the Global configurations.

完整的Page.png文档为全页图像制作。

收集了JS Confirm的Thton Cpck的屏幕。

在“测试航道”栏中,参数屏幕对RunFailure设定了违约的真正价值。 由于这些原因,总是为失败测试而摄取屏幕。

此外,屏幕灯光灯光灯参数具有光压/透镜的价值。 因此,屏幕显示器在屏幕上进行。

为了掌握不成功的屏幕,我们必须在电压中增加以下数值。 json file -

Cypress.Screenshot.defaults({
   screenshotOnRunFailure: false
})

Videos

录像带的“Cypress”通过测试进行。 这些材料储存在项目内的录像带上。

一俟气旋风暴测试与以下所述指挥进行:

node_modules/.bin/cypress run

我们获得奥塞罗语以及录像、压缩细节的位置,等等。

我们在该项目的同一地点获得相应的录像。

为了消除录像带,我们必须在电压中增加以下价值。 json file -

{
   "video": false
}

Cypress - Debugging

风暴具有非常好的破坏特征,我们在那里能够花时间,看到试验执行期间实际发生的情况。 可以通过将 mo压在试验航标上来进行。

随着我们走到试验车窗上的步骤,这些要素得到了强调。 我们还可以使用“旋风”指挥。 这预示了执行,在此期间,我们可以推翻先前的步骤。 之后,我们可以再次恢复执行。

Implementation

用于在Cypress进行脱硫的指挥如下:

describe( Tutorialspoint Test , function () {
   // test case
   it( Scenario 1 , function (){
      // launch the apppcation
      cy.visit("https://accounts.google.com");
      // enable cookie logging
      Cypress.Cookies.debug(true)
      cy.getCookies
      //pause execution
      cy.pause()
      cy.setCookie( cookie1 ,  value1  )
   });
});

产出如下:

产出记录显示,处决已经暂停(由Pauseshton代理)。 然后,我们再一次通过点击恢复纽顿(在帕塞德纽特州旁边)去除先前的步骤之后再恢复。

产出日志现在在停产后执行的所有步骤。

如果我们在浏览器上打开了开发商Console(压缩F12),并从测试仪中选择一个步骤,Console应显示所使用的指挥和估价的Yelded。

例如, for the setCookie step, the Console shows Command − setCookie and Yielded shows the cookie name − cookie1 and value − value1.

Cypress - Custom Commands

用户描述的是气压习惯,而不是Cypress的默认指挥。 这些定制的指挥系统被用来制造自动流动中重复的测试步骤。

我们可以补充并超越已经存在的指挥。 他们应被置于指挥部。 j 在“Cypress”项目支助组内存档。

Syntax

The syntax for thetomtors in Cypress is as follows -

Cypress.Commands.add(function-name, func)

Cypress.Commands.add(function-name, opts, func)

Cypress.Commands.overwrite(function-name, func)

这里

。

func> 是经过辩论才掌握的职能。

用来描述习惯指挥的含蓄特性。 它还用于确定如何处理以前产生的主题(只适用于Cypress.Commands.add())和选择的违约价值。 选择预先接受false,以忽视先前的主题,接受先前的主题,并接受optional,以开始链条或利用原有链条。 一种选择是接受扼杀、阵列或诱杀。

Implementation of custom command

下面是commands.js实施海关指令。

Cypress.Commands.add("userInput", (searchTxt) => {
   //to input search text in Google and perform search
   cy.get("input[type= text ]").type(searchTxt);
   cy.contains("Google Search").cpck();
});

Implementation of Actual Test

下面是按习俗指挥对Cypress进行实际测试的情况。

describe( Tutorialspoint Test , function () {
   // test case
   it( Test Case 6 , function (){
      // launch the apppcation
      cy.visit("https://www.google.com/");
      //custom parent command
      cy.userInput( Java )
   });
});

产出如下:

产出记录显示,习惯指挥——用户投入(行为、类型和点击指挥)已经执行。

建议海关指挥不应太长。 这应当是简短的,因为,在习惯指挥中增加太多的行动往往表明处决。

Cypress - Fixtures

添加气压装置,以保持和掌握自动化测试数据。 固定装置在Cypress项目夹(Example.json文档)内。 基本上,它帮助我们从外部档案中获得数据投入。

气压固定装置的夹可有JSON或其他格式的文档,数据则以“钥匙:价值”制成。

所有测试数据都可以通过一次以上的测试加以利用。 所有固定装置数据必须在前栏目中公布。

Syntax

The syntax for Cypress data Drive test is as follows -

cy.fixture(path of test data)
cy.fixture(path of test data, encoding type)
cy.fixture(path of test data, opts)
cy.fixture(path of test data, encoding type, options)

这里

编码类型——编码类型(tf-8, asci,等等)用于读文档。

Opts − Modifies the timeout for response. The default value is 30000ms. The wait time for cy.fixture(), prior throws an exception.

Implementation in example.json

下面是用example.json在Cypress进行数据驱动检测。

{
   "fullName": "Robert",
   "number": "789456123"
}

Implementation of Actual Test

在Cypress实施实际数据驱动测试如下:

describe( Tutorialspoint Test , function () {
   //part of before hook
   before(function(){
      //access fixture data
      cy.fixture( example ).then(function(regdata){
         this.regdata=regdata
      })
   })
   // test case
   it( Test Case1 , function (){
      // launch URL
      cy.visit("https://register.rediff.com/register/register.php")
      //data driven from fixture
      cy.get( :nth-child(3) > [width="185"] > input )
      .type(this.regdata.fullName)
      cy.get( #mobno ).type(this.regdata.number)
   });
});

产出如下:

产出记录显示,将罗伯特和789456123的数值分别输入全称和移动区。 这些数据已经通过固定装置进行测试。

Cypress - Environment Variables

我们可以确定可在全球范围内宣布用于测试自动化框架的环境变量,而且所有测试案例都可以查阅。 这种定制的环境变量可以储存在电压中。 json file within the project.

由于Cypress的缺省组合没有暴露出定制变量,我们必须提及电压中的关键是“evn”。 json案,然后确定价值。

此外,为了在实际测试中获取这一变量,我们必须使用Cypress.env,并传递在json档案中宣布的价值。

Implementation in cypress.json

环形中环境变量的指令的实施。 json格式如下:

{
   "projectId": "fvbpxy",
   "env" :
   {
      "url" : "https://www.google.com/"
   }
}

Implementation of Actual Test

气候压力中环境变量的实际试验如下:

describe( Tutorialspoint Test , function () {
   // test case
   it( Scenario 1 , function (){
      // launch apppcation from environment variable
      cy.visit(Cypress.env( url ))
      cy.getCookies()
      cy.setCookie( cookie1 ,  value1 )
   });
});

产出如下:

产出记录显示,启动的URL是一种定制的环境变数。 json案。

Configure Environment Variables

We can configure or modify the environment values from the command pne with the flag --env.