• 猿创征文｜Cypress vs Playwright，谁是UI自动化测试王者？

            对于测试从业者来说，手工测试是一个绕不过去的坎。当年第一份工作进了一家互联网公司。入职第一天就被师父"拉去干活"，至今印象深刻，是一个投顾管理平台（主要功能是为用户做理财产品和资讯推荐）。主要工作就是让我结合Excel里写好测试用例对web页面进行测试，说白了就是点点点。测试新人嘛，这些对于我来说挺新鲜的，但是随着时间的流逝，不到几个月就感觉有点不对了，手工测试完全是个机械化的工作，长此以往，会让你的大脑形成固化思维，在测试过程中大脑得到的测试价值边际效应是递减的，所以这也就解释了大部分手工测试人员普遍测试积极性不高，对未来充满焦虑的原因。

    穷则思变，当时作为小白的我向身边的测试老手了解到可以学习UI自动化测试。那时起，测试之路仿佛有了一盏灯塔，让我对其充满向往。随着从事测试行业工作的年限增长，测试经验也越来越丰富，期间大大小小也做了非常多的项目。渐渐地对UI测试自动化也做了些许积累。

    随着UI自动化技术的不断发展，此间涌现出一大批优秀的自动化框架，例如Selenium、UIrecoder、Cypress、Playwright等。市面上介绍Selenium、UIrecoder的文章比较多，而我此前也写过二者实践相关的文章，这里不做过多赘述，本文主要介绍近年大火的Cypress、Playwright框架，从二者提供的功能如元素交互、定位、处理告警、iframes、等待、requests进行对比，并通过案例详细呈现二者在使用上的区别。

     

    回到10年前，如果自动化测试人员想编写E2E测试用例，或许只能选择Selenium别无他法。而有使用Selenium开发测试用例的同学大多深有感触，开发用例前必须先做好很多设置上的准备工作，总之使用Selenium编写和调试用例不是让人愉快的经历。随着前端自动化技术的发展，Cypress和Playwright脱颖而出，是目前UI自动化理想的测试框架。

    • Cypress的设计为对开发人员十分友好，它可以直接在浏览器中运行。Cypress的第一版于2015年发布，并于2018年开始真正流行，2020年，Cypress正式开源。
    • Playwright于2020年发布。它起初是一个JavaScript库，用于跨浏览器的端到端测试开发，现在已经支持Python、.NET和Java语言。

    24b6c97f2f9294659fd0ed908b4b6655.jpeg

    尽管这两个框架都很“young”，但它们提供了许多很棒的功能，使前端测试的实现变得十分有趣。
    本文重点从大家比较关心的功能进行对比，为大家进行UI自动化的选型提供参考。

    1. 页面元素交互
    2. 导航
    3. 处理alerts弹框
    4. Iframes
    5. Waiting
    6. Requests
    7. 语言支持

    2d9b6074e7bd9a5ebd1393c9340e9f59.jpeg

    页面元素交互

    第一个例子介绍Cypress和Playwright与元素的交互及其断言上的使用方法。

    测试用例：打开复选框页面，验证项目复选框未选择，然后选中该项目复选框，验证该项目已被正确选择。

    Cypress:

    1. describe('Interacting with elements', () => {
    2.   it('First example', () => {
    3.     cy.visit('/checkboxes');
    4.     cy.get('[type="checkbox"]')
    5.       .should(($elm) => {
    6.         expect($elm).to.have.length(2);
    7.       })
    8.       .eq(0)
    9.       .should('not.be.checked')
    10.       .check()
    11.       .should('be.checked');
    12.   });
    13.  
    14.   it('Second example', () => {
    15.     cy.visit('/checkboxes');
    16.  
    17.     cy.get('[type="checkbox"]').then(($elm) => {
    18.       expect($elm).to.have.length(2);
    19.       expect($elm[0]).not.be.checked;
    20.       cy.wrap($elm[0])
    21.         .click()
    22.         .then(($elm) => {
    23.           expect($elm).to.be.checked;
    24.         });
    25.     });
    26.   });
    27. });

    Playwright:

    1. const { test, expect } = require('@playwright/test');
    2.  
    3. test('Interacting with elements', async ({ page }) => {
    4.   await page.goto('/checkboxes');
    5.   const checkboxes = page.locator('[type="checkbox"]');
    6.   const firstCheckbox = checkboxes.nth(0);
    7.  
    8.   await expect(await checkboxes.count()).toEqual(2);
    9.   await expect(firstCheckbox).not.toBeChecked();
    10.   await firstCheckbox.check();
    11.   await expect(firstCheckbox).toBeChecked();
    12. });

    通过代码演示，Cypress的代码相比Playwright不太容易理解，Playwright开发的测试用例更简洁容易理解。

    导航

    本案例验证它们如何处理当前页面中打开新页面。

    测试用例：用户单击链接，打开链接被重定向到新选项卡中的页面。

    Cypress:

    1. describe('Multiple windows', () => {
    2.   it('Windows support - not supported', () => {
    3.     cy.visit('/windows');
    4.  
    5.     cy.get('[href="/windows/new"]').click();
    6.  
    7.     cy.get('h3').should('have.text', 'New Window');
    8.   });
    9.  
    10.   it('Windows support - removing "target" attribute', () => {
    11.     cy.visit('/windows');
    12.  
    13.     cy.get('[href="/windows/new"]').invoke('removeAttr', 'target').click();
    14.  
    15.     cy.location('pathname').should('eq', '/windows/new');
    16.     cy.get('h3').should('have.text', 'New Window');
    17.   });
    18. });

    Playwright:

    1. const { test, expect } = require('@playwright/test');
    2.  
    3. test('Windows support', async ({ page, context }) => {
    4.   await page.goto('/windows');
    5.  
    6.   let [newPage] = await Promise.all([
    7.     context.waitForEvent('page'),
    8.     page.locator('[href="/windows/new"]').click(),
    9.   ]);
    10.  
    11.   await newPage.waitForLoadState();
    12.   const newWindowElement = newPage.locator('h3');
    13.  
    14.   expect(newPage.url()).toContain('/windows/new');
    15.   await expect(newWindowElement).toHaveText('New Window');
    16. });

    Cypress不支持在当前测试中打开新窗口，如果测试同学的业务测试场景需要这样操作，则很难满足用户需求。
    对于Playwright来说，可以打开的窗口数量没有限制，用户可以完全控制他想要验证的内容，可以随时与任何上下文相关。

    处理alerts弹框

    alerts弹窗对大多数用户来说不是很友好，事实上alerts在当下大多数应用程序中越来越不常见。但是在自动化测试过程中，我们仍然会接触到很多触发alerts弹窗的测试场景。
    下面这个案例就是比较两个框架处理alerts弹窗的方法。

    Cypress:

    1. describe('Handling Alerts in browser', () => {
    2.   beforeEach(() => {
    3.     cy.visit('/javascript_alerts');
    4.   });
    5.  
    6.   it('Click "OK" on JS Alert', () => {
    7.     cy.contains('Click for JS Alert').click();
    8.  
    9.     cy.on('window:alert', (alert) => {
    10.       expect(alert).to.eq('I am a JS Alert');
    11.     });
    12.     cy.on('window:confirm', () => true);
    13.     cy.get('#result').should('have.text', 'You successfully clicked an alert');
    14.   });
    15.  
    16.   it('Click "OK" on JS Confirm', () => {
    17.     cy.contains('Click for JS Confirm').click();
    18.  
    19.     cy.on('window:confirm', (str) => {
    20.       expect(str).to.equal(`I am a JS Confirm`);
    21.     });
    22.     cy.on('window:confirm', () => true);
    23.     cy.get('#result').should('have.text', 'You clicked: Ok');
    24.   });
    25.  
    26.   it('Click "Cancel" on JS Confirm', () => {
    27.     cy.contains('Click for JS Confirm').click();
    28.  
    29.     cy.on('window:confirm', (str) => {
    30.       expect(str).to.equal(`I am a JS Confirm`);
    31.     });
    32.     cy.on('window:confirm', () => false);
    33.     cy.get('#result').should('have.text', 'You clicked: Cancel');
    34.   });
    35.  
    36.   it('Fill JS Prompt', () => {
    37.     cy.window().then(($win) => {
    38.       cy.stub($win, 'prompt').returns('This is a test text');
    39.       cy.contains('Click for JS Prompt').click();
    40.     });
    41.     cy.get('#result').should('have.text', 'You entered: This is a test text');
    42.   });
    43. });

    Playwright:

    1. const { test, expect } = require('@playwright/test');
    2.  
    3. test.describe('Handling Alerts in browser', () => {
    4.   test.beforeEach(async ({ page }) => {
    5.     await page.goto('/javascript_alerts');
    6.   });
    7.  
    8.   test('Click "OK" on JS Alert', async ({ page }) => {
    9.     page.on('dialog', (dialog) => {
    10.       expect(dialog.message()).toBe('I am a JS Alert');
    11.       dialog.accept();
    12.     });
    13.  
    14.     const button = page.locator('button >> text=Click for JS Alert');
    15.     await button.click();
    16.  
    17.     const result = page.locator('#result');
    18.     await expect(result).toHaveText('You successfully clicked an alert');
    19.   });
    20.  
    21.   test('Click "OK" on JS Confirm', async ({ page }) => {
    22.     page.on('dialog', (dialog) => {
    23.       expect(dialog.message()).toBe('I am a JS Confirm');
    24.       dialog.accept();
    25.     });
    26.  
    27.     const button = page.locator('button >> text=Click for JS Confirm');
    28.     await button.click();
    29.  
    30.     const result = page.locator('#result');
    31.     await expect(result).toHaveText('You clicked: Ok');
    32.   });
    33.  
    34.   test('Click "Cancel" on JS Confirm', async ({ page }) => {
    35.     page.on('dialog', (dialog) => {
    36.       expect(dialog.message()).toBe('I am a JS Confirm');
    37.       dialog.dismiss();
    38.     });
    39.  
    40.     const button = page.locator('button >> text=Click for JS Confirm');
    41.     await button.click();
    42.  
    43.     const result = page.locator('#result');
    44.     await expect(result).toHaveText('You clicked: Cancel');
    45.   });
    46.  
    47.   test('Fill JS Prompt', async ({ page }) => {
    48.     page.on('dialog', (dialog) => {
    49.       expect(dialog.message()).toBe('I am a JS prompt');
    50.       dialog.accept('This is a test text');
    51.     });
    52.  
    53.     const button = page.locator('button >> text=Click for JS Prompt');
    54.     await button.click();
    55.  
    56.     const result = page.locator('#result');
    57.     await expect(result).toHaveText('You entered: This is a test text');
    58.   });
    59. });

    Playwright支持用相同的实现处理所有类型的alerts，用户可以轻松地验证alerts弹窗的内容。例如，选择你要测试的按钮。
    而Cypress对本地弹窗的处理就显得不太友好。用例中有三种不同类型的弹窗，Cypress则需要使用不同的测试代码，这样的测试代码就显得比较冗余。

    Iframes

    在测试过程中往往需要使用iframe，例如使用电脑端淘宝购物选择支付方式，则会有安全窗口让你输入账户密码。iframe对于自动化测试人员来说一直是个比较难解决的问题。

    测试用例：打开iframe并将文本输入其中。

    Cypress:

    1. it('Iframe support', () => {
    2.   cy.visit('/iframe');
    3.  
    4.   const iframe = cy
    5.     .get('#mce_0_ifr')
    6.     .its('0.contentDocument.body')
    7.     .should('be.visible')
    8.     .then(cy.wrap);
    9.  
    10.   iframe.clear().type('Some text').should('have.text', 'Some text');
    11. });

    Playwright:

    1. const { test, expect } = require('@playwright/test');
    2.  
    3. test('Iframe support', async ({ page }) => {
    4.   await page.goto('/iframe');
    5.  
    6.   const frame = page.frameLocator('#mce_0_ifr');
    7.   const frameBody = frame.locator('body');
    8.  
    9.   await frameBody.fill('');
    10.   await frameBody.fill('Some text');
    11.  
    12.   await expect(frameBody).toHaveText('Some text');
    13. });

    在Playwright中，使用frameLocator() 方法很容易获得Iframe。要在Iframe中执行操作，我们使用类似的frame.locator ()方法，就可以在其中执行任何操作，例如写入文本、单击元素操作。
    反观Cypress则并不容易处理iframe。如果要在Iframe中执行操作，我们需要安装npm cypress-iframe包，然后将插件添加到command.js。最后，在测试用例中，我们需要创建一个辅助函数，在其中传递要在iframe中执行操作的元素。

    Waiting

    一些比较老的测试框架始终存在等待缓慢加载元素的问题（例如selenium），有时候我们会在用例中添加过长超时时间以保证被测元素能加载出来来增加用例的稳定性，但是这样就大大降低了测试用例的执行效率。下面且看Cypress和Playwright是如何处理页面等待场景的。

    Cypress:

    1. it('Waiting for lazy elements', () => {
    2.   cy.visit('/dynamic_loading/2');
    3.  
    4.   cy.contains('button', 'Start').click();
    5.  
    6.   // Elements is loading longer then global timeout: 5_000
    7.   cy.get('#finish', { timeout: 10_000 }).should('be.visible').should('have.text', 'Hello World!');
    8. });

    Playwright:

    1. const { test, expect } = require('@playwright/test');
    2.  
    3. test('Waiting for lazy elements', async ({ page }) => {
    4.   await page.goto('/dynamic_loading/2');
    5.  
    6.   await page.getByText('Start').click();
    7.  
    8.   const finish = page.locator('#finish');
    9.  
    10.   // Elements is loading longer then global timeout: 5_000
    11.   await expect(finish).toBeVisible({ timeout: 10_000 });
    12.   await expect(finish).toHaveText('Hello World!');
    13. });

    通过代码可以直观地看到，在Cypress和Playwright中，如果需要等待一个元素，你不需要做任何额外的工作，只需要在用例中对cy.get()方法添加timeout，然后使用.should('be.visible')检查页上的元素是否存在。如果元素在默认超时 (5_000ms) 仍不存在，则认为该元素不会出现。
    在Playwright中，这种机制可以用于web-first断言。在这种情况下，我们确保元素可见，然后验证其可见性。
    当然，相对于“过时”的UI测试框架，这两种解决方案都令人满意。因为我们不必持续等待10_000毫秒的固定超时时间，只要在超时时间内元素可见 测试用例都是通过的。

    Requests

    web测试不只是对页面元素的测试，有时候我们还要验证请求到的后端API接口返回的内容。在Cypress和Playwright框架中，可以直接在测试代码里拦截和发送请求。

    测试用例：请求查询接口/api/users/2，对返回的内容进行断言。

    Cypress:

    1. it('Request support - "then" example', () => {
    2.   cy.request('GET', 'https://reqres.in/api/users/2').then(({ status, body }) => {
    3.     expect(status).to.equal(200);
    4.  
    5.     const { email, id } = body.data;
    6.  
    7.     expect(typeof email).to.be.equal('string');
    8.     expect(typeof id).to.be.equal('number');
    9.     expect(email).to.be.equal('janet.weaver@reqres.in');
    10.     expect(id).to.be.equal(2);
    11.   });
    12. });
    13.  
    14. it('Request support - "chain" example', () => {
    15.   cy.request('GET', 'https://reqres.in/api/users/2').as('response');
    16.   cy.get('@response').its('status').should('eq', 200);
    17.   cy.get('@response')
    18.     .its('body.data')
    19.     .then(({ email, id }) => {
    20.       expect(typeof email).to.be.equal('string');
    21.       expect(typeof id).to.be.equal('number');
    22.       expect(email).to.be.equal('janet.weaver@reqres.in');
    23.       expect(id).to.be.equal(2);
    24.     });
    25. });

    Playwright:

    1. const { test, expect } = require('@playwright/test');
    2.  
    3. test.use({
    4.   baseURL: 'https://reqres.in',
    5. });
    6.  
    7. test('Request support', async ({ request }) => {
    8.   const response = await request.get('/api/users/2');
    9.  
    10.   await expect(response).toBeOK();
    11.  
    12.   const body = await response.json();
    13.  
    14.   const { email, id } = body.data;
    15.   expect(typeof email).toBe('string');
    16.   expect(typeof id).toBe('number');
    17.   expect(email).toEqual('janet.weaver@reqres.in');
    18.   expect(id).toEqual(2);
    19. });

    Cypress和Playwright对发送HTTP请求对实现方式几乎一样。

    在Cypress，我们使用.request()方法将URL和我们要执行的方法作为参数，然后在回调中得到响应，响应结果包括status，body、duration等。
    在Playwright中，同样有request.get()方法用于发送HTTP请求，这里不做过多赘述。

    语言支持

    在UI自动化框架选型中，一个重要参考点就是 自动化测试框架支持哪些编程语言。因为在整个团队用特定语言编写的情况下，使用相同的语言编写测试用例可以更好的做测试工作，这这方面，无疑Playwright更具优势。

    Playwright支持 Java、Python、.NET (C #)。

    Cypress支持JavaScript。

    那么，正在读文章的你支持哪种UI自动化框架呢，评论区告诉我。

     

  • 相关阅读:
    gitlab runner
    使用腾讯云COS提示CORS策略阻止的解决方案
    Java框架 MyBatis自定义映射resultMap
    TD Target Algorithms
    Java中的多线程（线程，进程，线程状态的方法，并发，并行，线程调度）
    gitlab api使用入门
    mac 安装cnpm 淘宝镜像记录
    absl教程（五）：Synchronization library
    TypeScript(四)泛型编程
    点餐小程序实战教程07-点餐功能开发
  • 原文地址：https://blog.csdn.net/csd11311/article/details/127703464