Step by Step ‘Smashtest’ Test 10x Faster Automated สำหรับ Tester ไว้ดู live Report [เริ่มต้น]
บทความในบล็อคนี้จะพาทุกคนรู้จักกับ ‘Smashtest’ ที่เจ้าตัวคนทำ library นี้ว่าสามารถทดสอบได้เร็วมาก 10x รองรับ browser ได้หลายแบบ chrome, firefox, safari, IE รวมถึง mobile โดยใช้ Driver จาก Selenium และสามารถทดสอบได้ทั้ง Web UI และ API Testing ทำพวก mock resquest ต่างๆได้ ทำการ Test แบบ parallel ได้ แถมยังมี live report ที่ทำการโชว์ ทุก test case ว่า pass หรือ fail พร้อม screenshot ทุกขั้นตอนให้เราดู ที่ชอบสุดคงโหมด Debug เพราะใช้งานง่ายมาก
แต่ๆๆ มีอย่างหนึ่งที่อยากเตือน !! เนื่องจาก Smashtest ต้อง generate test case เป็น report ทุกบรรทัด เป็น tree-like format มันจะ sensitive กับเรื่องการย่อหน้าโค๊ดมาก การย่อหน้าโค๊ดไม่ถูกต้องอาจทำให้มัน error ว่าไม่เข้าใจ syntax หรือ กระโดดข้ามบรรทัดนั้นเสมือนว่าไม่ได้มีโค๊ดบรรทัดนั้นอยู่ ถ้าเรารันใน Debug mode เราจะเห็นการทำงานทุกบรรทัดชัดเจนขึ้น
Smashtest มี extension ให้ทั้ง Atom และ Visual Studio Code IDE แต่ในบทความนี้จะขอใช้เป็น Visual Studio Code และสาธิตการใช้งานโดยใช้ chrome นะ
Step1 : ติดตั้ง extension Smashtest ใน Visual Studio Code
Step2: Download chrome driver จาก Selenium website
Smashtest ได้แนะนำการติดตั้งไว้ว่าถ้าใช้ MacOS ก็วางที่ /usr/local/bin แต่ถ้า Windows ก็วางที่นี่นะ C:\Windows\system32 หรือภายในโฟล์เดอร์เดียวกับโปรเจค
Step3: npm init
(ต้องติดตั้ง nodejs ในเครื่องก่อนนะ)
Step4: npm install -g smashtest
Step5: Let’s code by copy this example code & save it to be ‘login.smash’
การทำงานของโค๊ดตัวอย่างโดยคร่าวๆคือเปิดเว็บไซต์ medium.com โดย chrome browser และทำการล็อคอินด้วย google account แต่พยายามใส่ password ที่ผิด เพื่อเช็ค test case ในส่วนของการ verify password ว่า fail
Step6: รันคำสั่ง smashtest login.smash
หลัง Run complete จะเห็น Report at เราก็ copy path ไปวางบนเบราเซอร์เรา
เราก็จะเห็นหน้า live report สวยๆของเรา ซึ่งเราสามารถลองคลิ๊กได้ทุก test case เลย Smashtest จะโชว์ screenshot ที่มันทำงานของ code แต่ละบรรทัดพร้อมผล test ให้เราดู
มาลอง run Smashtest ในโหมด Debug ดูบ้าง โดยเพิ่มเครื่องหมายตัวหนอน ~ ไปหน้า line code ที่เราต้องการ Debug การทำงานดังรูปด้านล่าง
ทีนี้เรามาลองรันกันใหม่ => smashtest login.smash
หมายเหตุ: เมื่อเรารันในโหมด debug ตัว report จะไม่ถูก generate และ chrome headless จะกลายเป็น True อัตโนมัติ เปิดหน้าเว็บขึ้นมาให้เราดูการทำงาน
จะเห็นว่ามันทำการเช็คทุกบรรทัดว่า pass หรือ failed เพราะอะไร
ทีนี้เรามาลองเข้าใจโค๊ดแต่ละบรรทัดกันดีกว่า !!!
ในโค๊ดตัวอย่างอันนี้ ประกอบด้วย 6 ส่วน
ส่วนแรก คือ เปิดใช้งานด้วยเบราเซอร์อะไร เราใช้ chrome ก็ open chrome
ส่วนสอง คือ ประกาศฟังก์ชั่นตัวแปรชื่อต่างๆ {variable} = ‘string’
*F คือ การประกาศฟังก์ชั่นสำหรับเรียกตัวแปร
สังเกตว่าตัวแปรแต่ละบรรทัดภายใต้ฟังก์ชั่นจะต้องทำการ Tab ย่อหน้า เพราะ Smahtest ใช้ tree-like format ส่วนเครื่องหมาย +? เป็นเพียงบอกว่าให้บรรทัดนี้ไม่ถูกโชว์ใน Live Report ก็เลยลองใส่ที่บรรทัด password เพราะเป็นข้อมูล sensitive แต่ในกรณีที่เราไม่ต้องการให้มีการโชว์ในโค๊ดเลย แนะนำให้ลง library fs เพิ่มเพื่อทำการ read จากไฟล์อื่นมา แล้วมาประกาศตัวแปรรับค่าจากไฟล์นั้น
ส่วนที่สาม คือ เปิดเว็บอะไร Navigate to ‘medium.com’
ส่วนที่สี่ คือ ประกาศตัวแปรใน props สำหรับเก็บ Element finder
ที่มี props สองตัวแปรเพราะว่าต้องการหาว่าปุ่ม sign in อยู่ไหนของหน้าเว็บ และทำการเลือก sign in ด้วย google account
ส่วนที่ห้า คือ ฟังก์ชั่นเช็คว่ามี element ที่ต้องการแล้วทำการ click ซึ่งบรรทัดที่ 17–24 จะทำงานเหมือนกัน เช่น (await $(`sign in`)).click();
ส่วนที่หก คือ ทำการพิมพ์ข้อความลงไปใน textbox แล้ว verify step ว่าทำงานถูกต้อง ซึ่งรูปแบบการ verify step เราสามารถเลือก verify ได้หลายแบบมากดังรูป แต่ในโค๊ดตัวอย่าง เราเลือกใช้เป็น verify ว่าเจอ element ตัวนี้หรือไม่เจอ
ทีนี้เราจะเรียกใช้ตัวแปร email กับ password ที่เราประกาศไว้บรรทัดบนสุดตอนแรกด้วย *F ทีนี้เวลาเราเรียกใช้ก็ต้องประกาศอีกทีว่า F แล้วค่อย Type …. into …
ยกตัวอย่างเคสการ verify password is not visible เหตุผลที่ใช้อันนี้คือ เวลาเรากรอก password ผิด มันจะค้างหน้าเดิมแล้วแจ้งเตือนว่า password ไม่ถูกต้องให้กรอกใหม่ ดังนั้นการ verify step เลยลองเช็คว่ายังเจอ input[name=password] อยู่รึป่าว ถ้ายังเจอก็แสดงว่า Fail กรอก password ผิด
ทั้งนี้ใครอยากดูละเอียดๆว่า Smashtest ใช้งานยังไงสามารถเข้าไปดูได้เลยที่
