node.js - 如何使用 Cypress 测试登录 GSuite 日历

Question

环境

• Windows 10
• Node.js 8
• Cypress 3.1.2
• Selenium
• Chrome v59

如何使用 Cypress 对 Google 日历进行身份验证？

我需要在我正在开发的 Chrome 扩展程序上运行自动化测试。第一步是验证/登录 GSuite 日历。

我正在使用 Cypress，但它不允许我登录 GSuite 日历。相反，当“点击登录”(来自 Cypress )时，它会再次跳转到 Next 按钮。

我的代码片段

describe('Login',function() {
   it('Go to GSuite calendar', function() {
     cy.visit('https://www.google.com/calendar')
   })

   it('Login', function() {
     cy.get('#Email').type('my user')
     cy.get('#next').click()
     cy.get('#Passwd').type('my password')
     cy.get('#signIn').click()
   })
})  

这失败了，将我带到 Next 按钮

截图

1。点击执行

2。最后，它返回到初始屏幕而不是让我登录

我尝试使用 Selenium 并且它有效

from selenium import webdriver
import time

# variables for userid & password
u = "JohnDoe@xxxx-labs.com"
p = "Mysecretpassword"

# chromedriver installation required for login through google chrome
driverpath = "C:/Users/pjain2/Desktop/chromedriver_win32/chromedriver"

# launch google calendar login page
d = webdriver.Chrome(driverpath)
d.get("https://www.google.com/calendar")

# fill email field send_keys for filling text
e = d.find_element_by_id("identifierId")
e.send_keys(u)

# find & click next button
d.find_element_by_xpath("//*[@id='identifierNext']/content/span").click()
time.sleep(2)

# enter password
e = d.find_element_by_xpath("//*[@id='password']/div[1]/div/div[1]/input")
e.send_keys("Mysecretpassword")
time.sleep(2)

# sign in
d.find_element_by_xpath("//*[@id='passwordNext']/content/span").click()
time.sleep(10)

谷歌日历登录成功截图

我想用 Cypress 实现同样的事情

有什么建议吗？

Answer 1

在spec.js文件中添加如下代码:

describe('Random VMR for ESG',function() {
    beforeEach(() => {
       cy.visit('https://www.google.com/calendar')
    })
      it('type email & password', function() {
        cy.get('#Email').type('my user')
        cy.get('#next').click()
        cy.get('#Passwd').type('my password')
        cy.get('#signIn').click()
    })   
})

在support文件夹，位于 command.js 中，添加以下代码:

Cypress.Commands.add('login', ()=> {
    cy.request({         // cy.request is not bound by any security and will bypass the login part
        method: 'POST' , // Post request to URL along with body
        url: 'https://www.google.com/calendar',
        body: {
            user: {
                email: 'my user',
                password: 'my password',
            }
        }
    })
     //server sends back the response JSON payload 
    .then((resp) => {      //token extracted from JSON payload and is saved in LocalStorage
     window.localStorage.setItem('jwt' , resp.body.user.token)
    })
})

在spec.js文件，有只访问 URL 并测试 email 的代码和 password输入类型并登录。

问题是在登录后立即将页面重定向回第一页。要解决此问题，我们使用 cy.request在commands.js文件自cy.request浏览器限制之外的请求。 即它不受任何安全性的约束。

一旦您对登录进行了适当的 e2e 测试，就没有理由继续 cy.visit()登录并等待整个页面加载所有相关资源，然后再运行任何其他命令。这样做会减慢我们整个测试套件的速度。使用 cy.request() ，我们可以绕过所有这些，因为它会自动获取和设置 cookie，就像请求来自浏览器本身一样。

因此，POST 请求与 JSON 负载或正文一起发送。现在，在成功验证请求主体后，我们的应用程序代码从有效负载中提取 token 并将其保存在本地存储中，并将 token 添加到所有请求 header 中，以便 API 服务器可以验证后续请求从我们的应用程序。

当我们的应用程序加载时，它会检查 token 是否已在本地存储中，如果是则继续并将其设置在请求代理上。这样，当您测试 GSuite 时，它将绕过登录部分。