การรัน C# Selenium Automated Test บน Github Action

สวัสดีครับ เพื่อนๆ บทความนี้ จะนำเสนอตัวอย่างโปรเจค Selenium Automated Test ที่เขียนโดยใช้ภาษา C# อย่างง่ายๆ และรันมันบน Github Action นะครับ เพื่อสรุปสิ่งที่ตัวเองได้เรียนรู้และลองทด ถ่ายทอดให้น้องในทีม และท่านที่สนใจนะคับ อย่างไรก็ตาม บทความนี้ยังไม่สมบูรณ์ เพราะตอนแรก ตั้งใจจะเขียนจนถึงให้แสดง Test Report ด้วย Allure ด้วย แต่ศึกษาไม่ทัน ติดปัญหาตอนเขียนครับ และถึง Deadline ที่จะส่งแล้ว ก็เลยทำส่งเท่าที่ศึกษามาได้ ก่อนนะคับ แล้วผมจะเขียนในบทความถัดไปนะครับ เป็นภาคต่อ

สำหรับเพื่อนๆ ที่อยากแลกเปลี่ยนความรู้กันกับผม สามารถติดต่อผมผ่านทาง FB นี้ได้เลยนะครับ

https://www.facebook.com/nakorn.rientrakrunchai

อย่างไรก็ตาม เนื้อหาในบทความนี้ยังไม่สมบูรณ์ เพราะตอนแรกตั้งใจว่า จะใช้ Allure มาใช้ในการแสดง report ผลการทดสอบ แบบสวยๆด้วย แต่ลองทำแล้วยังติดปัญหาอยู่ และถึงกำหนด Deadline ที่จะส่งแล้ว, เลยส่งเท่าที่ทำได้ ส่วนเรื่อง Allure เดี๊ยวเขียนต่อในบทความต่อๆไป นะครับ และยังไม่ได้เขียนถูกตาม best practice แต่เน้นการมาลองรันบน Github Action นะครับ

ในบทความนี้ คุณสามารถดู code ที่ทดสอบ ได้จากที่นี่ นะครับ

GitHub - nakornttss/testselenium02

อธิบายโปรเจค Selenium Automated Test ด้วยภาษา C# คร่าวๆ

ถ้าเพื่อนๆ เปิดโปรเจคขึ้นมา ตัว source code หลักของการทดสอบ จะอยู่ในกรอบแดง ซึ่งเมธอด Test01 จะเป็นส่วนของการทดสอบ และ SaveImage จะเป็นเมธอดสำหรับบันทึกรูปภาพผลการทดสอบ นะครับ, หลังจากดู code แล้ว ผู้อ่านน่าจะพอเดาออกว่า โปรแกรมจะทำงานดังนี้

1.เข้าไปที่ https://demo.identityserver.com/grants และบันทึกภาพ จะได้ดังรูปนี้

2.กรอก username / password ลงในช่อง โดยดึงค่าจาก Environment Variable แล้วบันทึกภาพ จะได้ดังรูปนี้

3.กดปุ่ม login และดูผล จากนั้น บันทึกภาพ ถ้า success จะได้ดังรูปนี้

ในขั้นตอนที่ 2 และ 3 หากกรอก username/password ผิด, จะแสดงผลดังนี้ และผลทดสอบจะเป็น Fail

อธิบายส่วนของ Github Action YML file

ในส่วนตรงนี้ ถ้าใครยังไม่รู้จัก Github Action ให้ศึกษาและทดลองจาก ที่นี่ นะครับ

Quickstart for GitHub Actions - GitHub Docs

ในตัวอย่างไฟล์ YML ของผม จะเป็นแบบนี้ครับ

อธิบายคร่าวๆ คือมันเป็นแบบนี้คับ

1.ในส่วนนี้ จะเป็นการบอก Github ว่า อนุญาตให้สั่งรันแบบ Manual ได้ โดยมันจะมี inputs ให้กรอก สองช่องคือ username / password ดังรูป

on: 
  workflow_dispatch:
    inputs:
        username:
          description: Username
          default: "bob"
          required: true
        password:
          description: Password (For example only. It's not secure.)
          default: "bob"
          required: true

อนึ่ง ตรง password ตอนไปใช้งานจริง ให้ดึงจาก secret นะครับ อย่าเขียนแบบนี้, อันนี้ เป็นตัวอย่างง่ายๆ เขียนแบบเร็วๆ ให้ดู เท่านั้น

ในส่วนนี้ จะเป็นการสร้าง job มา 1 รายการชื่อ Unit Testing (จริงๆตรงนี้ น่าจะเขียนว่า Automated Testing มากกว่านะครับ ไม่ใช่ Unit Testing แต่รีบๆ เลยเดี๊ยวไว้มาแก้ชื่อ ให้ดีๆนะคับ) โดยให้รันบน Windows-latest ซึ่งจะมี steps การทำงาน ได้แก่

• การ checkout code ออกมาจาก git
• การสั่งรัน dotnet test โดยกำหนดค่า environment จาก inputs ที่ใส่เข้ามา
• การ upload ภาพการทดสอบ ไปเก็บใน Artifact

jobs:
  tests:
    name: Unit Testing
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v3
      - run: dotnet test
        env:
          username: "${{ github.event.inputs.username }}"
          password: "${{ github.event.inputs.password }}"
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: imagesresult
          path: D:\a\testselenium02\testselenium02\bin\Debug\net6.0\imagesresult
          retention-days: 30

ซึ่งเมื่อลองรันดู จะพบขั้นตอนการทำงานของโปรแกรม ดังนี้ครับ

ตรวจสอบผลการทำงานบน Github Action

เมื่อสั่งรันแบบ Manual โดยกดตามกรอบสีแดงตามลำดับ แล้วกด Run Workflow

ในการทดสอบนี้ จะมี 2 แบบ คือ แบบที่รันผ่าน ซึ่งจะแสดงถูกสีเขียว และรันพัง ซึ่งจะแสดงกากบาทสีแดงตามรูป

แบบที่ 1 คือใส่ bob / bob เข้าไป แล้วรันผ่าน ผลมันจะขึ้นถูกสีเขียว และด้านใน มันจะแสดงแบบนี้ โดยกดดูรายละเอียดเพิ่มเติม ตามคำอธิบาย ในรูป

ตรงนี้ จะแสดงรายละเอียดผลการทดสอบ เหมือนกับที่เราสั่งรัน dotnet test ในเครื่องเราเอง, ซึ่งจริงๆ ตรงนี้ ผมพยายามจะใช้ Allure มาแสดง แต่ศึกษาไม่ทันครับ

เมื่อดาวโหลดภาพผลการทดสอบออกมา มันจะเป็นไฟล์ zip เมื่อแตกออกมา จะได้ดังนี้

แบบที่ 2 คือใส่ bob / bob22 เข้าไป แล้วไม่ผ่าน ผลมันจะขึ้นกากบาทแดง ซึ่งเราก็กดเข้าไปดูรายละเอียด คล้ายๆกับ แบบที่ 1 ได้เหมือนกันครับ

บทความนี้ เขียนด้วยความเร่งรีบแบบสุดๆ เพราะภรรยา ก็เรียกให้ขับรถไปตลาดนัดครับ แต่สุดท้ายก็เขียนจบจริงๆ ขอบคุณทุกคนที่อ่านมาถึงตรงนี้

หากใครอยากศึกษาเรื่อง Allure ต่อพร้อมๆกับผม ก็ลองดูจากที่นี่ ได้ครับ

Allure Framework

หน้าตาของมัน จะเป็นลักษณะนี้ครับ ภาพจาก internet นะครับ

ขอบคุณอีกครั้งนะครับ เจอกันในบทความต่อๆไป