มาเขียน Test บน Cypress.io ด้วย Typescript กันเถอะ
ต้องยอมรับเลยนะครับว่ายุคนี้เป็นยุคของภาษา Typescript โดยแท้ ผมสังเกตเห็นหลายๆ Project ใหม่ๆ ที่เป็น Web Development หรือแม้แต่ฝั่ง Server Side ที่เขียนด้วย Node.js ตอนนี้ก็หันมาเขียนกันด้วยภาษา Typescript กันหมดแล้ว ซึ่งก็แน่นอนครับ ถ้าใครที่เขียน Test ด้วย Cypress นั้น Cypress รองรับการเขียน Test ด้วย Typescript 100% ครับ ซึ่งวันนี้เราจะมาดูกันว่าถ้าอยากจะเขียนเทสด้วย Typescript บน Cypress จะต้องทำยังไงบ้าง แต่ขอบอกก่อนเลยครับว่าง่ายมากๆ
Typescript ต่างจาก Javascript ยังไง?
สำหรับใครที่ยังไม่เคยเขียน Typescript หรือไม่รู้จัก Typescript มาก่อน ผมขออธิบายคร่าวๆ นะครับ Typescript คือ Open Source Programming Language ที่บ. Microsoft สร้างขึ้นมาเพื่อเอามาใช้พัฒนา Application ที่มีขนาดใหญ่ มีความซับซ้อนสูง โดยมันถูกพัฒนาครอบภาษา Javascript อีกทีและมี Compatibility โดยตรงกับ Javascript เลย (อารมณ์คล้ายๆ ภาษา Kotlin ที่สามารถใช้แทนภาษา Java ได้ ประมาณนั้นเลยครับ)
ลักษณะของ Typescript คือมันเป็นภาษาที่ Strict Type (ตามชื่อของมันเลย) คล้ายๆ กับพวกภาษา Java, Kotlin, C# กล่าวคือจะต้องมีการ define type ของตัวแปรเสมอ และชนิดของตัวแปรเปลี่ยนแปลงไม่ได้ตลอดการใช้งาน เราเรียกอีกอย่างว่าเป็ร Static Typed Language ต่างกับ Javascript ที่เป็น Dynamic Typed Language และ Typescript ยังเป็นภาษาที่ต้องใช้ Transpiler เพื่อแปลงโค้ดก่อนถึงจะนำไปใช้รันได้ (Transpile คือการแปลง Source Code ของ Typescript ให้เป็น Javascript อีกที ไม่ใช่การ Compile Code นะครับ)
ข้อดีของ Typescript คือมันป้องกันการเขียนโค้ดที่อาจทำให้เกิด Runtime Error ได้ เพราะถ้าเราเขียนโค้ดไม่ดี Transpiler มันจะทำให้โค้ดเรา Build ไม่ผ่านตั้งแต่แรก และ Typescript ยังเพิ่มความสามารถหลายๆ อย่างที่ยังไม่มีบน Javascript เช่น การทำ Type Annotations, Interfaces, Classes ให้อารมณ์เหมือนเราเขียนโปรแกรมด้วยแนวคิด Object Oriented Programming มากๆ
เริ่มต้นเขียน Test บน Cypress ด้วย Typescript
Cypress นั้นได้ให้ Type Declaration ของ Typescript มาอยู่ใน Package ตอนที่เรา Install อยู่แล้วครับ ซึ่งมันทำให้เราสามารถเขียนเทสด้วย Typescript ได้ 100% เลย แต่ต้องมีการ Config เพิ่มเติมเพื่อทำการ Transpiled โค้ดก่อนนำไปรันนิดหน่อยครับ
ซึ่งการ Transpile Code ผมขอแนะนำให้ใช้ Webpack ซึ่งเป็น Library ที่ทำหน้าที่นี้ได้ดีอยู่แล้วครับ ซึ่งทาง Cypress ได้ออก Library ตัวหนึ่งชื่อว่า @cypress/webpack-preprocessor เพื่อใช้ในการทำ Transpile Code ให้เป็น Javascript ให้ครับ
แต่เพื่อให้ง่ายกว่านั้น ก็มีการพัฒนา Plugin ขึ้นมาเพื่อให้ Project ของเราสามารถเขียนด้วย Typescript ได้ง่ายๆ ไม่ต้อง Config อะไรมากมาย ซึ่ง Plugin ตัวนั้นก็คือ add-typescript-to-cypress โดยคุณ Bahmutov ซึ่งเป็น VP of Engineering ของ Cypress เขียนมาให้เราใช้งานเองเลย ซึ่งเราสามารถ install plugin ตัวนี้ตัวเดียวก็ทำให้เราสามารถเขียนเทสด้วย Typescript ได้แล้วครับ
sh$ yarn add @bahmutov/add-typescript-to-cypressPlugin ตัวนี้จะทำการ Modify ไฟล์ cypress/plugins/index.js ให้เป็นแบบนี้
หลังจากนั้นให้เราทำการสร้างไฟล์ tsconfig.json เพื่อใช้สำหรับ Config ตัว Typescript ต่างๆ เช่น Rule ต่างๆ รวมถึงอนุญาตให้มันสามารถทำงานร่วมกับไฟล์ .js ด้วยครับ
เริ่มเขียนเทสด้วย Typescript
การเขียนเทสบน Cypress ด้วย Typescript นั้นใช้ Syntax แทบจะไม่แตกต่างกับการเขียนด้วย Javascript เลยครับ เพียงแต่ว่าชื่อไฟล์จากเดิมที่เรามักจะตั้งชื่อไฟล์เป็น test.spec.js ก็เปลี่ยนเป็น test.spec.ts แบบนี้แทนครับ
สร้าง Custom Command และทำ Code Completionให้ด้วยบน Typescript
ข้อดีที่เป็นจุดเด่นของการเขียนเทสบน Cypress ด้วย Typescript ก็คือเวลาที่เราสร้าง Custom Command ของ Cypress ด้วย Typescript แล้วเราสามารถสร้าง Definition ของ Command นั้นเพื่อให้มันทำ Code Completion เวลาที่เราต้องการเรียกใช้ Custom Command นั้นได้เลย
Custom Command คือ Cypress Command ที่เราสร้างขึ้นมาเพื่อทำ Command ของเราเอง based on Cypress API ที่มีให้ใช้งาน ซึ่งเราสามารถใช้ Custom Command ที่เราเขียนขึ้นมาที่ Spec File ไหนก็ได้ที่อยู่ใน Project เดียวกัน
ยกตัวอย่างเช่น สมมติว่าผมต้องการที่จะสร้าง Custom Command เพื่อใช้ในการ Find Meta Element ที่อยู่ใน Browser เช่น <meta property=”og:title” content=”Hello World” /> ผมก็ทำการเขียนได้แบบนี้ครับ
ผมสร้างฟังก์ชัน metaTag เพื่อทำการค้นหา <meta> และ return type เป็น Chainable<Element> เพื่อสามารถนำไปใช้ทำ Assertion แบบ Chaining Call ได้เลย และผมยังประกาศ Definition ของฟังก์ชันนี้เพื่อให้เวลาผมเรียก cy.metaTag() มันโชว์ Usage ของ Custom Command นี้ขึ้นมาได้ ไม่ว่าจะเรียกจากที่ใดของ Project ก็ตามแบบนี้ครับ
ผมได้ทำการแก้ชื่อไฟล์ cypress/support/index.js เป็น cypress/support/index.ts เพื่อใช้ syntax ของ Typescript และด้านในก็ทำการ import ไฟล์ commands.ts ที่เราได้สร้าง Custom Command เข้ามาไว้
และเราจะต้องทำการแก้ Config ใน cypress.json ที่ parameter supportFile ให้ทำการชี้มาที่ไฟล์ cypress/support/index.ts แทนที่จะใช้ค่า default ที่เป็น cypress/support/index.js ครับ
{
"supportFile": "cypress/support/index.ts"
}เมื่อถึงเวลาที่เราเรียกใช้ Custom Command ในไฟล์ test.spec.ts เราก็จะได้เห็นว่ามันทำ Code Completion ให้เราพร้อมทั้งแสดงผล Usage วิธีการใช้ Custom Command ให้เราด้วยโดยมันจะดึงมาจาก Comment ของที่เราใส่ไว้ด้านบนของฟังก์ชันที่เราสร้างไว้ให้ด้วย ทำให้เราไม่ต้องไปหาวิธีการใช้งาน Custom Command จากไฟล์ไหนๆ เลย
หลังจากนั้นใน Spec File ของเราก็สามารถเรียกใช้ Custom Command ผ่านการเรียก cy.metaTag() และสามารถนำ output ของการรัน command นี้ไปทำ assertion ต่อได้เลย ดีงามสุดๆ ครับ
สรุปว่าเขียนเทสด้วย Typescript แล้วดียังไง?
- Test Code จะดู Clean ขึ้นและจะช่วยลดโค้ดที่อาจทำให้เกิด Runtime Error ได้
- สามารถทำงานร่วมกับไฟล์ js เดิมได้ เพราะฉะนั้นไม่ต้องห่วงว่าถ้ามีโค้ดเดิมที่เขียนด้วย Javascript อยู่แล้วก็สามารถเพิ่มโค้ดใหม่ที่เป็น Typescript เข้าไปได้เลย
- ถ้ามีการใช้งาน Custom Command จะช่วยให้เราสามารถทำ Code Completion พร้อมกับดู Usage ของ Command ได้ทุกไฟล์ใน Project เลย สะดวกมากๆ ทำให้ลดข้อผิดพลาดรวมถึงช่วยลด Duplicate Code ได้ด้วย
- Library ดังๆ หลายๆ ตัวที่เขียนด้วย Javascript สามารถเอามาใช้บน Typescript ได้เลย เพราะมีการใส่ Type Definition มาให้แล้ว
- สามารถใช้ Features หลายๆ อย่างใน Typescript ได้ เช่น Interfaces, Optional Properties สามารถอ่านเพิ่มเติมได้ที่นี่ครับ
ผมได้ทำตัวอย่าง Project ที่เขียนเทสบน Cypress ด้วย Typescript สามารถดูตัวอย่าง Project ได้ที่ลิ้งค์ด้านล่างนี้เลยครับ
หวังว่าบทความนี้น่าจะเป็นประโยชน์กับหลายคนที่อยากจะลองเริ่มเขียนเทสบน Cypress ด้วยภาษา Typescript เพื่อที่จะได้รับ Benefit หลายๆ อย่างที่มากับ Typescript ครับ ขอให้ทุกท่านมีความสุขกับการเขียนเทส Happy Testing!
