Trace log viewer ui

Robot framework Puppeteer ตั้งแต่ version 3.1.0 รองรับการ log โดยใช้ Feature Trace ของ Playwright แล้ว มันจะดีกว่า สะดวกกว่า Log ของ Robot ยังไงมาดูกันเลย

มาดูหน้าตาของ Trace log กัน

Trace log มาจะในรูปแบบของ Zip file ธรรมดาเลย โดย 1 Zip file จะเป็น log ของเทสเคส 1 ข้อครับ
ซึ่งชื่อของ Trace file ก็จะตรงกับชื่อของเทสเคส เพื่อให้เราเข้าใจได้ง่ายนั่นเอง

ตัวอย่าง Test case: Submit login form

Trace log file

ส่วนวิธีเปิด File ดูก็ทำได้ง่ายๆด้วย คำสั่ง

playwright show-trace 'Submit login form.zip'

ถ้าทุกอย่างถูกต้องก็จะมีหน้าต่าง Trace log Viewer แสดงขึ้นมาแบบนี้ครับ

Trace log viewer

Anyalyze Trace log view

  • Timeline – แสดง flow ตั้งแต่เริ่ม open browser จนถึง step ที่ เขียน Trace log file
  • Actions – เป็น step แต่ละ step ที่เราส่งคำสั่งไปยัง Playwright
  • Action detail – เป็น Detail ของแต่ละ step ที่ส่งไปยัง Playwright

จะเปิด Feature Trace log ยังไง

เริ่มต้นจาก install library version ล่าสุดก่อนเลยด้วยคำสั่ง

pip install --upgrade robotframework-PuppeteerLibrary

จากนั้นทำการเพิ่ม Keyword Start tracing และ Stop Tracing ตามตัวอย่างด้านล่างครับ

*** Settings ***
Library    PuppeteerLibrary
Test Teardown    Test teardown
Suite Teardown    Close Puppeteer

*** Variables ***
${DEFAULT_BROWSER}    chrome


*** Test Cases ***
Submit login form
    Open browser to test page    http://127.0.0.1:7272/login-form-example.html
    Input Text    id=exampleInputEmail1    [email protected]
    Input Password    xpath=//*[@id='exampleInputPassword1']    123456789
    Click Element    id=exampleCheck1
    Run Async Keywords
    ...    Wait For New Window Open    AND
    ...    Click Element    css=button[type="submit"]
    Switch Window    NEW
    Wait Until Page Contains    Login succeeded
    
*** Keywords ***
Open browser to test page
    [Arguments]    ${url}
    ${BROWSER} =     Get variable value    ${BROWSER}    ${DEFAULT_BROWSER}
    ${HEADLESS}     Get variable value    ${HEADLESS}    ${False}
    &{options} =    create dictionary   headless=${HEADLESS}
    Open browser    ${url}    browser=${BROWSER}   options=${options}
    # Start Tracing เริ่มบันทึก log
    Start tracing
    
Test teardown
    # Stop Tracing เพื่อเขียน log file
    Stop Tracing
    Close All Browser

จากตัวอย่างโค้ดด้านบนจะเห็นว่า คำสั่ง Start Tracing ถูกเรียกใช้เมื่อเปิด Browser และ Stop Tracing ถูกเรียกก่อนจะจบการเทสข้อนั้นๆ

Trace log ไม่ได้มาแทนที่ Robot log

จะเห็นว่ามุมมองของ Trace log กับ Robot log จะไม่ได้เป็นมุมมองเดียวกันซะทีเดียว แต่เป็นส่วนขยายเวลาที่เราต้องการที่จะเข้าใจ Error ที่เกิดขึ้นมากขึ้น

จากประสบการณ์ Trace log จะใช้ได้ดีมากกรณีที่เราเจอ Unstable test จะทำให้เราเข้าใจว่าแต่ละ Step ที่รัน คำสั่งต่างๆเกิดอะไรขึ้นบนหน้าจอ

บทความก่อนหน้านี้มา build Nodejs บน Jenkins กัน
บทความถัดไปAuto-waiting ของ Robot Framework Puppeteer
Quality On Top