[UI 테스팅 자동화 라이브러리]selenium vs puppeteer vs playwirght

1. selenium

셀레니움은 브라우저 자동화를 위한 2004년에 발표된 오픈소스로서, 자동화 라이브러리 중 가장 오래되었고 커뮤니티 또한 가장 방대하다.

셀레니움은 CI/CD, 스크린샷 테스트 및 UI auto testing 등 다양한 고급 기능을 지원한다.

(1) 특징

- Chrome 브라우저 뿐만 아니라 Firefox, Safari, Internet Explorer 등 다양한 브라우저 지원

- 언어 : Java,Python, JavaScript, C#, Ruby

- 지원 OS : Windows, Mac OS, Linux & Solaris

- 셀레니움의 주요 구성 요소는 Selenium WebDriver, Selenium IDE, Selenium Grid 세가지가 있다.

- browser driver & 독립 실행형 서버

- 가장 거대하며, 활발한 커뮤니티

 

2. puppeteer

puppeteer는 구글에서 개발한 Headless Chrome Node.js 라이브러리 및 browser testing 프레임워크이다.

puppeteer는 주로 screenshot testing, performance testing, web scraping, automation 기능을 수행한다.

(1) 특징

- selenium 보다 사용하기(배우기) 쉬움

 - selenium 보다 빠른 속도

- browser 상의 DevTools console.log 및 network 응답, 실패 등 모니터링 가능

- Form Test, UI Test, keyboard type 등 automatic 가능

- 최신 JavaScript 및 browser 기능을 사용하여 Testing

 

(2) 단점

- JavaScript 언어만 지원함.

 

3. playwright

playwright 는 20년도에 microsoft 에서 시작한 node.js 기반 오픈소스로서, 단일 API를 통해 Chromium, Firefox, Webkit 기반 브라우저를 자동화 하도록 개발된 라이브러리로서, UI Testing, E2E Test 등 에 활용된다.

(1) 특징

- 3개의 브라우저 엔진 지원 : Chromium(Chrome, Microsoft Edge, Opera), Firefox(firefox), Webkit(Safari)

- 지원 OS : Windows, Mac OS, Linux 

- 언어 : Java, Python, C#, JavaScript, TypeScript

- Node.js 프레임워크 기반 오픈소스

- 커뮤니티는 작지만 빠르게 성장중

(2) 단점

- 작은 커뮤니티

 

----------------------------------------------------------------------------------------------------------------------

<playwright install>

npm init playwright@latest

<running example text>

npx playwright test

<using codegen>

codegen 사용 시, 웹에 들어가서 클릭할 때마다 자동으로 코드가 생성되어 코드 짤 때 매우 효율적.

npx playwright codegen https://www.naver.com

 

<playwright.dev doc>

 

<playwright code example>

// test.spec.ts


import { test, expect } from '@playwright/test';
import {chromium} from "playwright";
test.describe('login',()=>{
  test('Logger', async () => {
    const browser = await chromium.launch({
      headless: false,
      logger: {
        isEnabled:(name, severity) => true,
        log: (name, severity, message, args) => console.log(`name = ${name}, message = ${message}`)
      }
    });
    const context = await browser.newContext();
    // Open new page
    const page = await context.newPage();
    await page.goto('https://bssdev.canals.co.kr/login');
    // Click button:has-text("마켓보로 Google 이메일로 로그인")
    await page.waitForTimeout(2000)
    const [page1] = await Promise.all([
      page.waitForEvent('popup'),
      page.locator('button:has-text("마켓보로 Google 이메일로 로그인")').click()
    ]);
    // Click [aria-label="이메일 또는 휴대전화"]
    await page1.locator('[aria-label="이메일 또는 휴대전화"]').click();
    await page1.waitForTimeout(2000)
    // Fill [aria-label="이메일 또는 휴대전화"]
    await page1.locator('[aria-label="이메일 또는 휴대전화"]').fill('stufit@marketboro.com');
    await page1.waitForTimeout(2000)
    // Press Enter
    await page1.locator('[aria-label="이메일 또는 휴대전화"]').press('Enter');
    await page1.waitForTimeout(2000)
    // Fill [aria-label="비밀번호 입력"]
    await page1.locator('[aria-label="비밀번호 입력"]').fill('aksgml123!');


    // Press Enter
    await page1.locator('[aria-label="비밀번호 입력"]').press('Enter');
    await page1.waitForTimeout(5000)
    const errorMsg = await page.locator('.alter-error')
    await expect(errorMsg).toContainText('')
    await page1.close();
    // ---------------------
    // Go to https://bssdev.canals.co.kr/vendor
    await page.goto('https://bssdev.canals.co.kr/vendor');
    //expect(await page.screenshot()).toMatchSnapshot('result호이호이.png')
    await page.waitForTimeout(3000)
    // Click button:has-text("신규 생성F5")
    await page.locator('button:has-text("신규 생성F5")').click();
    // Click #input-225
    await page.waitForTimeout(3000)
    await page.locator('#input-216').click();
    await page.waitForTimeout(3000)
    // Click div[role="listbox"] >> text=대전지사
    await page.locator('div[role="listbox"] >> text=대전지사').click();
    await page.waitForTimeout(3000)
    // Click button:has-text("저장")
    page.once('dialog', dialog => {
      console.log(`Dialog message: ${dialog.message()}`);
      dialog.dismiss().catch(() => {});
    });
    await page.locator('button:has-text("저장")').click();
  })
});

// playwright.config.ts


import {PlaywrightTestConfig} from "@playwright/test";

const playwrightConfig : PlaywrightTestConfig = {
  use : {
    headless: !true,
    viewport: {width: 1280, height: 720},
    browserName: "chromium",
    screenshot: "on",
    trace: "retain-on-failure",
    baseURL: "https://bssdev.canals.co.kr/login",
    launchOptions: {
      logger: {
        isEnabled:(name, severity) => true,
        log: (name, severity, message, args) => console.log(`name= ${name}, message= ${message}, severity= ${severity}, args= ${args}`)
      }
    }
  },
  //timeout: 10000,
  testMatch: ["marketboro.spec.ts"],
  retries: 0,
  reporter: [["dot"],["json",{outputFile:"marketboro_test_result.json"}]],
}

export default playwrightConfig;