Cypress对决Selenium：最适合你的跨浏览器测试解决方案是哪个？

Cypress对决Selenium：最适合你的跨浏览器测试解决方案是哪个？

1   Cypress vs. Selenium概述

Cypress和Selenium都是用于web app测试的自动化框架。

Selenium是一个成熟的解决方案，而Cypress相对来讲比较新。

Cypress支持的是JavaScript，而Selenium支持多种语言。

Cypress支持端到端的测试。Selenium也支持，同时也提供了安全和单元测试。

毫无疑问，Selenium是多年来跨浏览器测试领域事实上的王者。但现在，Cypress正在获得越来越多的关注。

随着数十种基于WebDriver协议构建的框架的发展变化，Cypress.io在市场上的势头越来越迅猛。

在这篇文章中，我们将对Cypress与Selenium进行细化比较，以帮助大家决定哪种选择更合适。

2  两者的简介内容

先来对比一下，它们分别为从业者解决什么问题。

2.1  Selenium的内容

Selenium是一个测试自动化工具，可以让开发人员自动化地进行Web浏览器测试。Selenium WebDriver协议可以将各种开发语言的命令--如Java、Java Script、C#、Python等--从测试环境（IDEs）发送到选定的桌面浏览器（Chrome、Firefox、Edge、Safari）。

每一个浏览器都有自己的WebDriver，它是测试的一个依赖关系，以便能够兼容和执行所需的操作（点击、滑动、断定等）。

作为一个领先的解决方案，Selenium可以作为Protractor、WebDriverIO等常用测试框架联通Appium等移动应用测试框架的基础框架。根据采用量和下载量的市场趋势来看， Selenium是浏览器测试自动化的关键推动者。

同时我们可以看到Cypress的下载量已经超过了WebDriverIO了。

2.2  Cypress的内容

Cypress是一个用于Web应用程序的JavaScript测试自动化解决方案。

该解决方案的目的是使前端开发人员和测试自动化工程师能够用JavaScript这种事实上的Web语言编写Web测试。

Cypress还支持Mocha测试框架，因此，你可以在Mocha之上的Java脚本中开发Web测试自动化的核心技术。

3     如何开始使用Selenium进行跨浏览器测试？

Selenium测试自动化入门很容易。

它需要一个本地或云端设置的Selenium Grid、你想测试的浏览器的SeleniumWebDriver，以及各种WebDriver支持的开发语言。

要开始使用本地Selenium，需要到Selenium主页（https://www.seleniumhq.org/），下载相关的Web驱动，并设置好相关开发语言的IDE环境。

一个简单的本地Selenium脚本：

package com.perfecto.sampleproject;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.chrome.ChromeDriver;

import org.testng.annotations.Test;

public class LocalSelenium {

@Test

public void main() {

//Note: Download chromeDriver for windows and update the below if running from Windows.

System.setProperty(

"webdriver.chrome.driver",

System.getProperty("user.dir") + "//libs//chromedriver"

);

//A sample chrome driver script to access perfecto website and verify the title

WebDriver driver = new ChromeDriver();

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

driver.manage().timeouts().pageLoadTimeout(15, TimeUnit.SECONDS);

driver.get("https://www.perfecto.io");

String aTitle = driver.getTitle();

System.out.println(aTitle);

//compare the actual title with the expected title

if (

aTitle.equals(

"Web & Mobile App

Testing | Continuous Testing | Perfecto "

)

) {

System.out.println("Test Passed");

} else {

System.out.println("Test Failed");

}

driver.close();

driver.quit();

}

}

一个简单的Java中的Selenium项目代码例子：

package com.perfecto.sampleproject;

import java.net.MalformedURLException;

import java.net.URL;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.Platform;

import org.openqa.selenium.remote.DesiredCapabilities;

import org.openqa.selenium.remote.RemoteWebDriver;

import org.testng.annotations.Test;

import com.perfecto.reportium.client.ReportiumClient;

import com.perfecto.reportium.client.ReportiumClientFactory;

import com.perfecto.reportium.model.Job;

import com.perfecto.reportium.model.PerfectoExecutionContext;

import com.perfecto.reportium.model.Project;

import com.perfecto.reportium.test.TestContext;

import com.perfecto.reportium.test.result.TestResult;

import com.perfecto.reportium.test.result.TestResultFactory;

public class PerfectoSelenium {

@Test

public void main() throws MalformedURLException {

//Update cloudName variable with your perfecto cloud name

String cloudName = System.getProperty("cloudName");

//Update securityToken variable with your perfecto security token.

String securityToken = System.getProperty("securityToken");

String browserName = "mobileOS";

DesiredCapabilities capabilities = new DesiredCapabilities(browserName, "", Platform.ANY);

capabilities.setCapability("securityToken", securityToken);

capabilities.setCapability("platformName", "Android");

RemoteWebDriver driver = new

RemoteWebDriver(new URL("https://" + cloudName + ".perfectomobile.com/nexperience/perfectomobile/wd/hub"), capabilities);

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

driver.manage().timeouts().pageLoadTimeout(15, TimeUnit.SECONDS);

// Reporting client. For more details, see https: //developers.perfectomobile.com/display/PD/Java

PerfectoExecutionContext perfectoExecutionContext;

if (System.getProperty("reportium - job - name ") != null) {

perfectoExecutionContext = new PerfectoExecutionContext.PerfectoExecutionContextBuilder()

.withProject(new Project("My Project", "1.0"))

.withJob(new Job(System.getProperty("reportium-job-name"), Integer.parseInt(System.getProperty("reportium-job-number"))))

.withContextTags("tag1")

.withWebDriver(driver)

.build();

}

else {

perfectoExecutionContext = new PerfectoExecutionContext.PerfectoExecutionContextBuilder()

.withProject(new Project("My Project", "1.0"))

.withContextTags("tag1")

.withWebDriver(driver)

.build();

}

ReportiumClient reportiumClient = new ReportiumClientFactory().createPerfectoReportiumClient(perfectoExecutionContext);

try {

reportiumClient.testStart("Perfecto mobile web test", new TestContext("tag2", "tag3"));

reportiumClient.stepStart("browser navigate to perfecto");

driver.get("https://www.perfecto.io");

reportiumClient.stepEnd();

reportiumClient.stepStart("Verify title");

String

aTitle = driver.getTitle();

System.out.println(aTitle);

//compare the actual title with the expected title

if (!aTitle.equals("Web & Mobile App Testing | Continuous Testing |

Perfecto "))

throw new RuntimeException("Title is mismatched");

reportiumClient.stepEnd();

//STOP TEST

TestResult testResult = TestResultFactory.createSuccess();

reportiumClient.testStop(testResult);

}

catch(Exception e) {

TestResult testResult = TestResultFactory.createFailure(e);

reportiumClient.testStop(testResult);

e.printStackTrace();

} finally {

driver.close();

driver.quit();

// Retrieve the URL to

the DigitalZoom Report

String reportURL = reportiumClient.getReportUrl();

System.out.println(reportURL);

}

}

}

上面的脚本将简单地在Perfecto.io网站上验证页面标题，并将结果反馈到报告仪表板。上面的脚本也可以通过ChromeDriver或其他测试开发人员设置的本地桌面机器执行。

4     如何开始使用Cypress

着手使用Cypress，你需要通过 "npm installcypress "以及 "npm install mocha "下载NPM包，或者从cypress.io网站下载Cypress桌面应用程序。

Cypress解决方案自带了一组漂亮的JavaScript示例。一旦你启动Cypress(./node_modules/bin/cypress open)，你可以通过工具自带的Chrome浏览器来运行它们。

事实上，该解决方案已经捆绑了一个随时可以使用的浏览器，这使得使用起来更加容易。

虽然Cypress是建立在MochaJS之上，但它自带了大量的API来利用浏览器的特定命令，如设置视图、清除cookies以及其他基本的浏览命令等。

一个用Cypress编写的测试的例子：

cy.visit将简单地用Chrome浏览器导航到URL，cy.get将对页面上的特定元素执行所需的操作，如点击、执行断言或键入文本。

5     优点和缺点比较：Cypress vs Selenium

Cypress和Selenium都有优点和缺点，正确的选择取决于你的需求。

下面是对它们利弊做个对比：

如上表所示, 这两个解决方案提供的功能不同。

除此之外，还有其他的元素，比如编写脚本、报告和仪表板的简单性。

作为一个整体，在每一个工具的选择上，取决于团队的目标、技能组合、测试范围和其他产品的特定考虑。

Cypress是一个很好的成长型工具。它的上手速度很快，并且提供了一个很好的执行环境，可以说是一个很好的执行环境，而且是预装的。它是完全面向JavaScript/MochaJS的，有特定的新API来简化脚本编写。

另一方面，Selenium是一个成熟的框架，覆盖了多个浏览器和不同的开发语言。而且它在网格内可以很好地进行规模化测试。在这两个工具之间，关于测试软弱的因素是值得商榷的。

有人会认为，Cypress产生的测试脚本更加健壮可靠，而Selenium专家可以提供良好的实践来克服这类问题。

6     Cypress与Selenium哪个更好？

当谈到Cypress与Selenium哪个更好时，建议团队开始探索尝试Cypress，看看它是否能补充现有的Selenium脚本，从而增加整体测试覆盖率和稳定性。

如果你已经有一个很好的工作中的Selenium套件，而且很稳定，并且覆盖了足够的功能，那么没有必要急于切换工具。如果你正在开始一个新的项目，可以尝试Cypress。

context("Waiting", () => {

beforeEach(() => {

cy.visit("https://example.cypress.io/commands/waiting");

});

// BE CAREFUL of adding unnecessary wait times.

// https://on.cypress.io/best-practices#Unnecessary-Waiting

// https://on.cypress.io/wait

it("cy.wait() - wait for a specific amount of time", () => {

cy.get(".wait-input1").type("Wait 1000ms after typing");

cy.wait(1000);

cy.get(".wait-input2").type("Wait 1000ms after typing");

cy.wait(1000);

cy.get(".wait-input3").type("Wait 1000ms after typing");

cy.wait(1000);

});

it("cy.wait() - wait for a specific route", () => {

cy.server();

// Listen to GET to comments/1

cy.route("GET", "comments/*").as("getComment");

// we have code that gets a comment when

// the button is clicked in scripts.js

cy.get(".network-btn").click();

// wait for GET comments/1

cy.wait("@getComment").its("status").should("eq", 200);

});

});

7      参考

https://testguild.com/cypress-io-vs-selenium-test-automation/

https://medium.com/@applitools/cypress-vs-selenium-webdriver-better-or-just-different-2dc76906607d

https://blog.logrocket.com/cypress-io-the-selenium-killer/

https://www.perfecto.io/blog/cypress-vs-selenium-whats-right-cross-browser-testing-solution-you