Home Puppeteer เร่งสปีด E2E เทส ด้วยการเลิก login ซ้ำๆ

เร่งสปีด E2E เทส ด้วยการเลิก login ซ้ำๆ

November 22, 2021

3029

เวลาเราทำ E2E เทส เรามักจะต้องมีขั้นตอนในการ Login ก่อนเสมอ ซึ่งเหมือนเป็นขั้นตอนพื้นฐานก่อนการรันเทสในแต่ละข้อ ซึ่งการ Login ส่วนใหญ่มักจะเป็นขั้นตอนที่ใช้เวลา หรือบางครั้งเป็นขั้นตอนที่ไม่เสถียรกรณี่ที่ระบบ Login เป็นคนละ Application หลักที่จะเทส

วันนี้ผมจะมาแนะนำฟีเจอร์ใหม่ ที่จะใช้แก้ปัญหาด้วยการใช้ Browser State ในการจดจำข้อมูลหลังจากที่เรา Login เสร็จเรียบร้อยแล้ว เพื่อที่เราจะได้ไม่ต้องมา login เข้าระบบซ้ำๆในการรันเทสเคสข้อถัดๆไป ทั้งที่ไม่จำเป็น

Browser State

การที่ฝั่ง Server สามารถระบุได้ว่า Browser เราทำงานอยู่ที่ State ไหน Server จะทำการส่งค่า Reference มาเก็บที่ Browser ของเรา โดย State หลักๆมีดังนี้

cookie
local storage
session storage (ค่อนข้างจะถูกใช้น้อย)

ซึ่งจาก 3 ประเภทหลักๆด้านบน State Management keywords รองรับ cookie และ local storage ให้เราอัตโนมัติครับ

ตัวอย่างการใช้งาน

*** Settings ***
Library    PuppeteerLibrary
Test Setup    Open browser to test page    
Test Teardown    Close All Browser
Suite Teardown    Close Puppeteer


*** Variables ***
${DEFAULT_BROWSER}    chrome
${HOME_PAGE_URL}    https://demoqa.com/login
${PROFILE_PAGE_URL}    https://demoqa.com/profile
${USERNAME}    qahive
${PASSWORD}    Welcome1!


*** Test Cases ***
Save and Reuse browser authen state into json file
    Input Text    id=userName    ${USERNAME}
    Input Password    id=password    ${PASSWORD}
    Click Element    id=login
    Wait Until Page Contains Element    id=userName-value
    Wait Until Page Contains    ${USERNAME}    
    # Save State after login success
    Save Browser Storage State    admin
    Close All Browser
    # Reopen and bypass login by using state ref
    ${BROWSER} =     Get variable value    ${BROWSER}     ${DEFAULT_BROWSER}
    ${HEADLESS}     Get variable value    ${HEADLESS}    ${False}
    &{options} =    create dictionary   headless=${HEADLESS}    state_ref=admin
    Open browser    ${PROFILE_PAGE_URL}   browser=${BROWSER}    options=${options}
    Wait Until Page Contains    ${USERNAME}
    Delete Browser Storage State    admin
    Delete All Browser Storage States

*** Keywords ***
Open browser to test page
    ${BROWSER} =     Get variable value    ${BROWSER}     ${DEFAULT_BROWSER}
    ${HEADLESS}     Get variable value    ${HEADLESS}    ${False}
    &{options} =    create dictionary   headless=${HEADLESS}
    Open browser    ${HOME_PAGE_URL}   browser=${BROWSER}    options=${options}
    Set Screenshot Directory    test-report
    Capture Page Screenshot

จากตัวอย่างด้านบนจะเห็นว่าหลังจากที่ทำการ Login เสร็จเรียบร้อย และมีการตรวจสอบว่า User profile ขึ้นมาถูกต้องแล้ว ก็จะมีการสั่งคำสั่ง Save Browser Storage State ซึ่งมีการส่งค่าอ้างอิงที่ชื่อ admin โดยคำสั่งนี้จะทำการบันทึก State ของ Browser ลงมาเป็นไฟล์ json และมีรหัสอ้างอิงคือ admin

หลังจากเราทำการปิด Browser ไปและทำการ Open browser มาใหม่ จะมีการส่ง state_ref=admin เพื่อทำการโหลด State ที่เราบันทึกไว้กลับออกมาใช้งาน ทำให้เราสามารถเปิดหน้าเว็บไปที่หน้า Profile page ได้โดยไม่ต้อง login นั่นเอง

สุดท้ายถ้าเราอยากจะลบ State ทิ้ง เราสามารถใช้คำสั่ง

Delete Browser Storage State เป็นการลบ State จาก State ref นั่นเอง
Delete All Browser Storage States เป็นการลย State ทั้งหมด ที่เรามีอยู่

ประโยชน์

ลดเวลาการเทสลงอย่างเห็นได้ชัด ไม่ต้องมา login ซ้ำๆ
แก้ปัญหาการทำ Authen ที่เป็นระบบภายนอก ไม่ต้องเสี่ยงกับระบบที่ใช้ได้บ้างไม่ได้บ้าง
สามารถนำมาประยุกต์ใช้ในการเทส state อื่นๆนอกจาก Login ก็ได้ เช่นการซื้อสินค้า