Playwright를 사용한 종단 간 테스트 - 간단한 데모

11837 단어

소개



문서의 정의에서 Playwright는 "최신 웹 앱에 대한 신뢰할 수 있는 종단 간 테스트를 가능하게 하는"도구입니다.

이 문서는 atutorial series on playwright의 데모 세션입니다.

따라서 이 자습서에서는 online store



테스트 설정


  • npm install --save-dev @playwright/test를 통해 극작가를 설치합니다.

  • 다음으로 프로젝트 디렉터리의 루트에 구성 파일을 설정합니다.

    //playwright.config.js
    const { devices } = require('@playwright/dev');
    
    /** @type {import('@playwright/test').PlaywrightTestConfig} */
    const config = {
        projects: [
            name: 'chrome',
            use: { ...devices['Desktop Chrome'] }
        ],
        use: {
            launchOptions: {
                slowMo: 100,
                headless: false
            }
        }
    };
    
    module.exports = config;
    

    이 구성 파일은 데스크톱 크롬 브라우저에서 테스트를 실행하도록 Playwright를 설정합니다.

  • 테스트 스크립트 작성



    데모를 사용하여 테스트는 다음을 단계별로 수행해야 합니다.
  • 사용자 세부 정보를 입력하고 로그인합니다
  • .
  • Sauce Labs Bike Light 제품을 선택하고 장바구니에 담기
  • 카트를 보고 카트의 총 가격이 $9.99라고 주장합니다.

  • 새 파일 demo-store.spec.js 을 만들고 아래 코드를 작성합니다.

    //demo-store.spec.js
    const { test } = require('@playwright/test');
    
    test('demo store cart store', async ({ page }) => {
        await page.goto('https://www.saucedemo.com/');
    });
    


    위의 코드는 지정된 URL을 엽니다.

    다음으로 page.type() 방법을 사용하여 표준 사용자에 대해 제공된 로그인 세부 정보로 사용자 이름 및 암호를 채웁니다.

    const standardUser = {
        username: 'standard_user',
      password: 'secret_sauce'
    };
    
    await page.type('[placeholder=Username]', standardUser.username);
    await page.type('[placeholder=Password]', standardUser.password);
    
    await page.click('text=LOGIN');
    


    선택한 제품 이름을 클릭하고 장바구니에 추가합니다.

    await page.click('text=Sauce Labs Bike Light');
    await page.click('text=ADD TO CART');
    


    그런 다음 카트의 총 가격을 확인합니다.

    const totalPrice = page.locator('.inventory_item_price');
    expect(await totalPrice.textContent()).toBe('$9.99');
    


    전체 스크립트를 결합하면 다음과 같습니다.

    // demo-store.spec.js
    const { test, expect } = require('@playwright/test');
    
    test('demo store cart store', async ({ page }) => {
      await page.goto('https://www.saucedemo.com/');
    
      // login credentials
      const standardUser = {
        username: 'standard_user',
        password: 'secret_sauce'
      };
    
      await page.type('[placeholder=Username]', standardUser.username);
      await page.type('[placeholder=Password]', standardUser.password);
      await page.click('text=LOGIN');
    
      await page.click('text=Sauce Labs Bike Light');
      await page.click('text=ADD TO CART');
    
      await page.click('.shopping_cart_link');
    
      const totalPrice = page.locator('.inventory_item_price');
      expect(await totalPrice.textContent()).toBe('$9.99');
    });
    


    테스트 스크립트 실행




    npx run playwright test demo-store.spec.js
    




    위의 비디오는 Playwright로 생성되었으므로 테스트 사례에 대한 어설션 작성을 진행하기 전에 비디오 및 스크린샷next 생성에 대해 설명합니다.

    좋은 웹페이지 즐겨찾기