พื้นที่เก็บข้อมูล Github: ลิงก์
การทดสอบแอปพลิเคชันได้พิสูจน์แล้วว่าเป็นส่วนสำคัญของกระบวนการพัฒนาซอฟต์แวร์ยุคใหม่ เราต้องการให้แน่ใจว่าเรากำลังจัดส่งซอฟต์แวร์คุณภาพสูงและเป็นซอฟต์แวร์ที่ไม่ทำให้การผลิตเสียหาย
การตรวจจับข้อบกพร่องอาจเป็นงานหนักและเชื่อฉันเถอะว่าคุณคงไม่อยากให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดีในขณะที่ใช้แอปพลิเคชันของคุณ
การทดสอบแบบ end-to-end ช่วยให้มั่นใจได้ว่าจะตรวจจับจุดบกพร่องเกี่ยวกับการโต้ตอบของผู้ใช้ก่อนที่จะปรับใช้แอปพลิเคชันกับการใช้งานจริง
ฉันเล่นกับเครื่องมือมากมายสำหรับการทดสอบแบบครบวงจร ฉันพบว่า TestCafe ค่อนข้างง่ายและมีประสิทธิภาพ ฉันชอบที่จะใช้สิ่งนี้เป็นเครื่องมือที่ต้องการสำหรับการทดสอบแบบครบวงจร
บทความนี้ไม่ได้มีวัตถุประสงค์เพื่อเปรียบเทียบเครื่องมือต่างๆ ที่คุณสามารถใช้เพื่อการทดสอบแบบครบวงจร แต่มีจุดมุ่งหมายเพื่อแสดงให้คุณเห็นว่าคุณสามารถใช้ TestCafe ได้อย่างไร
เรากำลังจะสร้างอะไร
ในบทความนี้ ฉันกำลังทดสอบแอปพลิเคชัน node.js ที่เรนเดอร์โดยเซิร์ฟเวอร์ แอปนี้สร้างขึ้นโดยใช้ Node.js บนฝั่งเซิร์ฟเวอร์ และเสิร์ฟร้อนที่ส่วนหน้าโดยใช้แฮนด์
นี่เป็นเพียงเรื่องของการตั้งค่าเท่านั้น เพราะฉันรู้ว่าวิศวกรจำนวนมากได้ถามคำถามว่าพวกเขาสามารถทดสอบแอปพลิเคชัน Node.js ที่แสดงผลบนเซิร์ฟเวอร์ได้อย่างไร
โปรดทราบว่า TestCafe จะทำงานกับเครื่องมือสร้างเทมเพลตใด ๆ หากคุณใช้งาน มันจะทำงานโดยไม่คำนึงถึงเฟรมเวิร์กส่วนหน้าที่ขับเคลื่อนแอปพลิเคชันของคุณ เช่น React, Angular, jQuery ฯลฯ แต่จะทำงานกับส่วนหน้าที่ขับเคลื่อนด้วยแอตทริบิวต์ JavaScript หรือ HTML
การติดตั้ง Testcafe
TestCafe ติดตั้งง่ายมาก คุณไม่จำเป็นต้องทำอะไรบ้าๆ
หากคุณติดตั้ง node.js บนเครื่องของคุณ สิ่งที่คุณต้องทำคือเรียกใช้:
npm install -g testcafe
เพียงเท่านี้ คุณเพิ่งตั้งค่า test cafe สำหรับการใช้งานของคุณ เนื่องจากคำสั่งนั้นจะติดตั้ง TestCafe ทั่วโลกบนเครื่องของคุณ
การตั้งค่า TestCafe บนแอป Node.js ของเรา
ดูพื้นที่เก็บข้อมูลที่นี่:https://github.com/seunzone/node -testcafe
นอกจากนี้ โปรดทราบว่าฉันได้ตั้งค่าเซิร์ฟเวอร์ด่วน Node.js ด้วยแฮนด์บาร์แล้ว คุณสามารถใช้สภาพแวดล้อมที่เหมาะสมกับคุณได้
ฉันจะเริ่มต้นด้วยการติดตั้ง testcafe เป็นการพึ่งพาโดยเรียกใช้: yarn add testcafe คุณสามารถติดตั้งเป็นการพึ่งพา dev ได้
ต่อไป ฉันจะสร้างสคริปต์ทดสอบในไฟล์ package.json ของฉัน และสั่งให้ทำการทดสอบให้ฉัน
"dev": "nodemon --exec babel-node src/app.js", "test": "testcafe chrome src/tests/index.js --app 'yarn dev' -s screenshots",
สำหรับการตั้งค่าสภาพแวดล้อมของฉัน yarn run dev มักจะเริ่มต้นแอปของฉันในโหมดการพัฒนา ดังนั้นคำสั่งyarn dev ที่คุณเห็นในสคริปต์ทดสอบของฉัน
คุณจะสังเกตด้วยว่าเรามี testcafe chrome เริ่มต้นสคริปต์ทดสอบ คำสั่งนี้เพียงสั่งให้ TestCafe ทำการทดสอบบนเบราว์เซอร์ Chrome จากนั้นคำสั่งถัดไปจะระบุเส้นทางไปยังตำแหน่งที่เราจะเขียนการทดสอบของเรา
ฉันได้สร้างแอปพลิเคชันสิ่งที่ต้องทำที่เรียบง่าย และเราจะทดสอบโดยใช้ TestCafe
พื้นฐานของ TestCafe
เอกสารของ TestCafe ค่อนข้างมีประโยชน์ จริงๆ แล้วฉันได้เรียนรู้หลายสิ่งที่ฉันรู้โดยเพียงแค่ติดตามเอกสารต่างๆ
วิธีการที่มีประโยชน์มากที่คุณจะใช้เวลาส่วนใหญ่ในขณะที่เชื่อมต่อกับ testcafe คือวิธี Selector วิธีการนี้ช่วยให้แน่ใจว่าได้เลือกองค์ประกอบภายใน DOM ที่คุณต้องการทดสอบ
ในไฟล์ src/tests/index.js ฉันจะเขียนโค้ดต่อไปนี้:
บรรทัดที่ 1 นำเข้าเมธอด Selector จากแพ็คเกจ testcafe
บรรทัด 3 เป็นเพียงตัวแปรที่ฉันสร้างขึ้นเพื่อเลือกองค์ประกอบ h4 บน DOM
ในบรรทัดที่ 6 เราจะป้อน URL ที่เราต้องการทดสอบ URL ที่คุณต้องการทดสอบไม่จำเป็นต้องขับเคลื่อนโดยเซิร์ฟเวอร์ภายในเครื่องของคุณ แต่อาจเป็นลิงก์จากเซิร์ฟเวอร์ที่ใช้งานจริง ทีมพัฒนาส่วนใหญ่มักจะใช้สภาพแวดล้อมการจัดเตรียมสำหรับการทดสอบแบบ end-to-end และฉันขอแนะนำอย่างยิ่งให้ฝึกปฏิบัติเช่นนี้
ในบรรทัดที่ 10 คือที่ที่เราเขียนการทดสอบจริงของเรา
หากต้องการรันการทดสอบ เพียงรัน yarn run test บนเทอร์มินัล เบราว์เซอร์ Chrome จะเริ่มทำงานเพื่อรันการทดสอบที่เราเขียนไว้
หมายเหตุ: อย่าปรับเบราว์เซอร์ TestCafe ที่เปิดให้คุณเมื่อรันการทดสอบ
จำลองกิจกรรมของผู้ใช้บน TestCafe
ด้วย TestCafe คุณสามารถจำลองกิจกรรมของผู้ใช้บน DOM และเขียนสคริปต์ทดสอบเพื่อให้ได้ผลลัพธ์ที่คาดหวัง
เราจะทดสอบสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้พยายามป้อนสิ่งที่ต้องทำใหม่
ในบรรทัดที่ 3 เราคลิกที่ปุ่มใดปุ่มหนึ่งบนเพจของเรา
ในบรรทัดที่ 5 เราระบุว่าเราคาดหวังสิ่งใหม่ของเรา หน้าเพื่อให้ตรงกับเส้นทาง /new
บนเบราว์เซอร์
บรรทัด 8 และ 9 จะพิมพ์ตัวอักษรบางตัวลงในช่องป้อนข้อมูลของหน้าใหม่ ในขณะที่บรรทัด 10 จะคลิกที่ปุ่มบนหน้า
อีกวิธีหนึ่งในการจำลองกิจกรรมของผู้ใช้บนเบราว์เซอร์คือวิธี pressKey()
pressKey('down up down down enter') จะกดปุ่มลงบนแป้นพิมพ์หนึ่งครั้ง จากนั้นจึงกดปุ่มขึ้นหนึ่งครั้ง จากนั้นจะกดปุ่มลงสองครั้งและปุ่ม Enter ในที่สุด คุณยังสามารถจำลองการเลื่อนหน้าสิ่งต่าง ๆ ใน TestCafe
วิธีต่างๆ ในการเขียนแบบทดสอบของคุณ
การเขียนแอปพลิเคชันขนาดใหญ่อาจเป็นเรื่องที่น่ากังวล ดังนั้นนักพัฒนาบางรายจึงต้องการคัดลอกโค้ดตัวเลือกโดยตรงจาก DOM
โค้ดด้านบนสามารถเขียนได้ดังนี้:
หากต้องการรับตำแหน่งขององค์ประกอบโดยตรงบน DOM:
- คลิกขวาบนหน้าเว็บ
- คลิกที่ตรวจสอบ
- คลิกที่ลูกศรเพื่อตรวจสอบองค์ประกอบ
- คลิกองค์ประกอบที่คุณต้องการกำหนดเป้าหมายบน DOM
- สุดท้าย ตัวเลือกการคัดลอก
จากนั้นคุณสามารถวางโค้ดที่สร้างขึ้นภายในวิธีการเลือกในการทดสอบของคุณได้ มันจะมีลักษณะดังนี้:
Selector('body > div > div.row.area > div.col-md-8 > div > a')
การแก้ไขข้อบกพร่องในการทดสอบของคุณ
เมธอด .debug() JavaScript ในตัวมีประโยชน์มากเมื่อทำการดีบักการทดสอบ
หากต้องการเข้าสู่โหมดดีบั๊ก สิ่งที่คุณต้องทำคือเรียกเมธอดภายในโค้ดของคุณ จากนั้นการทดสอบจะหยุดชั่วคราวที่จุดนั้น
การทดสอบจะหยุดชั่วคราวที่คำสั่ง .debug() จากนั้นคุณสามารถ resume การทดสอบหรือ unlock page เพื่อทดสอบองค์ประกอบด้วยตนเองโดยตรงบน DOM
คุณยังสามารถข้ามการทดสอบจากการรันได้โดยการเรียกเมธอด .skip() หรือคุณสามารถรัน .only() เพื่อทำการทดสอบเดี่ยวได้
คุณสามารถตรวจสอบ เอกสารประกอบ เพื่อดูวิธีการต่างๆ ที่ใช้ได้สำหรับวัตถุประสงค์ในการพัฒนา
ฉันหวังว่าบทความนี้จะมีประโยชน์บ้างในการแนะนำให้คุณรู้จักกับวิธีเร่งความเร็วกับ TestCafe
แหล่งข้อมูลที่เป็นประโยชน์อื่นๆ
เอกสารประกอบ เป็นสถานที่ที่ดีในการชำระเงิน
ฉันยังพบบทความที่ดีมากโดย Michael Herman ที่นี่
