극작가에게 인사하기

Playwright는 항상 친환경적이고 유능하고 안정적이며 빠른 크로스 브라우저 웹 자동화를 가능하게 하도록 구축되었습니다. 단일 API로 크롬, 파이어폭스, 웹킷을 자동화하는 Node 라이브러리입니다. Microsoft에서 개발했으며 오픈 소스입니다.

그리고 무엇을 추측? Puppeteer를 개발한 동일한 팀에서 개발했습니다. 따라서 Playwright는 puppeteer가 수행한 모든 것 외에 훨씬 더 많은 것을 제공합니다. 모든 인기 있는 브라우저를 지원하고 API는 테스트 친화적이며 브라우저 컨텍스트와 함께 린 병렬화를 제공합니다. 팀은 도구에 대해 많은 것을 알려주는 Puppeteer에서 배운 교훈을 통합했다고 말합니다.



I have recently published a full course on Playwright:
Web Automation and Testing using Playwright (This is a limited time discount link)




목차

  • Why Playwright
  • Playwright Installation
  • Core Concepts
  • Basic Script

  • Playwright API
  • Navigation
  • Identifying Web Elements
  • Interacting with Web Elements

  • End-to-End Testing with Playwright



  • 왜 극작가

    Here are some reasons why you should consider Playwright:

    • Support for all browsers and both headful and headless modes
    • Supports multiple languages- JavaScript, TypeScript, Python, C# and Go
    • Fast and reliable execution
    • Powerful automation capabilities that support modern web features
    • Run multi-page emulation scenarios
    • Integrates with your workflow

    Back to table of contents


    극작가 설치

    Playwright has a one-step-setup. The following command will install Playwright in your project:

    npm install playwright

    Back to table of contents


    핵심 개념

    브라우저 유형



    브라우저 유형을 선택해야 합니다. browserType은 chromiun, firefox 또는 webkit일 수 있습니다.

    const { firefox } = require('playwright');
    


    브라우저 인스턴스



    browserType의 시작 메서드를 사용하여 해당 browserType의 브라우저 인스턴스를 만듭니다.

    const browser = await firefox.launch();
    


    브라우저 컨텍스트



    그런 다음 새 브라우저 컨텍스트를 시작합니다. 브라우저 컨텍스트는 여러 개의 독립적인 브라우저 세션을 작동하는 방법을 제공합니다.

    const context = await browser.newContext();
    


    페이지



    이 컨텍스트를 사용하여 페이지를 만듭니다. 페이지는 기본적으로 브라우저의 탭이나 팝업 창입니다. 단일 브라우저 컨텍스트를 사용하여 여러 페이지를 만들 수 있습니다.

    const page = await context.newPage();
    


    Page는 페이지의 요소와 상호 작용하는 메서드를 제공합니다.

    마지막으로 브라우저 인스턴스를 닫습니다.

    await browser.close();
    




    Back to table of contents


    기본 스크립트

    Here is a basic Playwright script that opens a firefox browser, navigates to example.com and then closes the browser instance:

    const { firefox } = require('playwright');
    (async () => {
       const browser = await firefox.launch();
       const context = await browser.newContext();
       const page = await context.newPage();
       await page.goto('https://example.com')
       await browser.close();
    })() 
    

    Back to table of contents


    극작가 API

    Playwright API provides various methods to perform operations like navigating to a webpage, identifying and interacting with web elements and so on.

    항해

    Here are the most commonly used navigation related methods:

    // Navigate to a specific url
    await page.goto(url)
    
    // Go back in browser's history
    await page.goBack()
    
    // Go forward in browser's history
    await page.goForward()
    
    // Reload a page
    await page.reload()
    

    웹 요소 식별

    Identifying web elements is critical to any web automation tool. Playwright provides two methods to identify elements.

    // Find an element matching the specified selector
    await page.$(selector)
    
    // Find all elements matching the specified selector
    await page.$$(selector)
    
    The selector could be a CSS selector, XPath selector, HTML attribute or text content. Understanding how to efficiently and uniquely identify your elements in an art that must be mastered to produce reliable scripts. The full course on Playwright will help you become better at it. Again, here is the limited time discount link for the course: Web Automation and Testing using Playwright

    웹 요소와 상호 작용

    Here are the methods for the most commonly used interactions with web elements:

    // Click on an element
    await page.click(selector)
    
    // Input some text
    await page.fill(selector, value)
    
    // Check a checkbox
    await page.check(selector)
    
    // 'Uncheck a checkbox
    await page.uncheck(selector)
    
    // Focus on an element
    await page. focus(selector)
    

    Each of these methods have some optional parameters and there are many more methods for interacting with web elements.

    Back to table of contents


    Playwright를 사용한 종단 간 테스트

    You can plug-in popular JavaScript test runners with Playwright. You can use Jest/Jasmine, AVA or Mocha.

    Jest-Playwright 테스트 작성에 특히 인기가 있습니다.

    다음은 샘플 테스트입니다.

    beforeAll(async () => {
      await page.goto('https://whatismybrowser.com/')
    })
    
    test('should display "google" text on page', async () => {
      const browser = await page.$eval('.string-major', (el) => el.innerHTML)
      expect(browser).toContain('Chrome')
    })
    


    jest-playwright는 테스트를 작성하는 데 사용할 수 있는 강력한 프레임워크입니다.

    Back to table of contents



    Full course on Playwright:
    Web Automation and Testing using Playwright (This is a limited time discount link)

    좋은 웹페이지 즐겨찾기