SeleniumとCypressを簡単に比べてみた

こんにちは、エンジニアの ksnth です。

今回は、普段自動テストで使っているSeleniumと、自分は使ったことのないCypressを簡単ですが比べてみました。

Seleniumの方は使い慣れているPythonで作成してますが、その他サポートしている言語でもOKです。

CypressはTypeScriptで作成するようです。

環境

今回のPC環境は以下の通りです

Windows 11

Chrome

Selenium

・Cypress

・node

テーマ

Yahooサイトで「テスト自動化」を検索するところまでの操作をテストすることにしました。

Selenium

以下の様なスクリプトを作成して実行すると、以下のスクリーンショットが出力されます。

# -*- coding: utf-8 -*-
import os
import sys
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from time import sleep

options = webdriver.ChromeOptions()
options.add_argument('--hide-scrollbars')
options.add_argument('--headless')
options.add_argument('--incognito')
options.add_argument('--no-sandbox')
driver = webdriver.Chrome(options=options)

url = 'https://www.yahoo.co.jp/'
driver.get(url)
driver.implicitly_wait(30) el = driver.find_element(By.TAG_NAME, "input") el.clear() el.send_keys("テスト自動化") sleep(5) driver.set_window_size(1000, 1200) driver.save_screenshot('selenium_001.png') el = driver.find_element(By.CLASS_NAME, "_3s3YPSCNUcgAFkPwVeRyfT") el.click() sleep(5) driver.save_screenshot('selenium_002.png') driver.close() driver.quit()

Cypress

調べながら以下の様なスクリプトを作成し実行しましたが、以下の様なエラー(未キャッチ例外??)が発生して動きませんでした。

const SEARCH = "テスト自動化";

describe('cypressでテスト', () => {
  it('yahooで検索する', () => {
    cy.visit('https://www.yahoo.co.jp/');
    cy.wait(10000);
    cy.screenshot('page001');

    cy.get('.m4wO0W1Qp4Rm8IpDS5ZjR').children('._1wsoZ5fswvzAoNYvIJgrU4').should('be.visible').type(SEARCH).type('{enter}');
    cy.wait(10000)
    cy.screenshot('page002');
  });
});
  cypressでテスト
    1) yahooで検索する


  0 passing (8s)
  1 failing

  1) cypressでテスト
       yahooで検索する:
     Error: The following error originated from your application code, not from Cypress.

  > ResizeObserver loop limit exceeded

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application
    at <unknown> (https://www.yahoo.co.jp/:0:0)

う~ん、未だに原因分からずですが、回避策としてこのエラーをスルーする方法が見つかりましたので、そのコードを追加して実行したところ、動きました、ほっ。

const SEARCH = "テスト自動化";

describe('cypressでテスト', () => {
  it('yahooで検索する', () => {
    cy.on('uncaught:exception', (error) => {
      console.log(`${error.message}`);
      return false;
    });

    cy.visit('https://www.yahoo.co.jp/');
    cy.wait(10000);
    cy.screenshot('page001');

    cy.get('.m4wO0W1Qp4Rm8IpDS5ZjR').children('._1wsoZ5fswvzAoNYvIJgrU4').should('be.visible').type(SEARCH).type('{enter}');
    cy.wait(10000)
    cy.screenshot('page002');
  });
});

スクリーンショットは以下の通りです。

ところで、Cypressは自動で動画も取得してくれるのですね、すごい!!

いかがでしょうか、Cypressは初めてということもあり、途中エラーで悩んだり、思うように動かせなかったですが、環境構築がとても楽(Seleniumと比べて)ですので、すぐに色々と試すことができます。

以上で、SeleniumとCypressを簡単に比べてみたを終わります。

ありがとうございました。