ข้อมูลอ้างอิงฟีเจอร์

Sofia Emelianova

Jecelyn Yeen

ดูวิธีแชร์การไหลเวียนของผู้ใช้ แก้ไขการไหลเวียนของผู้ใช้ และขั้นตอนต่างๆ ในแผงเครื่องมือบันทึกของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ซึ่งเป็นแหล่งอ้างอิงฟีเจอร์ที่ครอบคลุม

ดูข้อมูลเบื้องต้นเกี่ยวกับการใช้งานแผงโปรแกรมอัดเสียงได้ที่บันทึก เล่นซ้ำ และวัดเส้นทางของผู้ใช้

เรียนรู้และปรับแต่งทางลัด

ใช้แป้นพิมพ์ลัดเพื่อไปยังส่วนต่างๆ ของโปรแกรมอัดเสียงได้เร็วขึ้น ดูรายการแป้นพิมพ์ลัดเริ่มต้นได้ที่แป้นพิมพ์ลัดของแผงโปรแกรมอัดเสียง

หากต้องการเปิดเคล็ดลับที่แสดงแป้นพิมพ์ลัดทั้งหมดในโปรแกรมอัดเสียง ให้คลิกความช่วยเหลือ แสดงแป้นพิมพ์ลัดที่มุมขวาบน

วิธีปรับแต่งแป้นพิมพ์ลัดของ Recorder

1. เปิด การตั้งค่า > ทางลัด
2. เลื่อนลงไปที่ส่วนโปรแกรมอัดเสียง
3. ทำตามขั้นตอนในหัวข้อปรับแต่งแป้นพิมพ์ลัด

แก้ไขการไหลเวียนของผู้ใช้

ที่ด้านบนของแผงโปรแกรมอัดเสียงจะมีตัวเลือกให้คุณดำเนินการต่อไปนี้

1. เพิ่มไฟล์บันทึกเสียงใหม่ คลิกไอคอน + เพื่อเพิ่มการบันทึกใหม่
2. ดูไฟล์บันทึกเสียงทั้งหมด เมนูแบบเลื่อนลงจะแสดงรายการไฟล์บันทึกเสียงที่บันทึกไว้ เลือกตัวเลือกไฟล์บันทึกเสียง N รายการเพื่อขยายและจัดการรายการไฟล์บันทึกเสียงที่บันทึกไว้

3. ส่งออกไฟล์บันทึกเสียง หากต้องการปรับแต่งสคริปต์เพิ่มเติมหรือแชร์เพื่อวัตถุประสงค์ในการรายงานข้อบกพร่อง คุณสามารถส่งออกโฟลว์ผู้ใช้ได้ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้

   • ไฟล์ JSON
   • สคริปต์ @puppeteer/replay
   • สคริปต์ Puppeteer
   • สคริปต์ Puppeteer (สำหรับ Firefox)
   • Puppeteer (รวมถึงการวิเคราะห์ Lighthouse)

   ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบได้ที่หัวข้อส่งออก Funnel ของผู้ใช้

4. นำเข้าไฟล์บันทึกเสียง ในรูปแบบ JSON เท่านั้น

5. ลบไฟล์บันทึก ลบไฟล์บันทึกเสียงที่เลือก

นอกจากนี้ คุณยังแก้ไขชื่อไฟล์บันทึกเสียงได้โดยคลิกปุ่มแก้ไข ข้างไฟล์

แชร์การไหลเวียนของผู้ใช้

คุณส่งออกและนำเข้าการไหลเวียนของผู้ใช้ในโปรแกรมอัดเสียงได้ วิธีนี้เป็นประโยชน์สำหรับการรายงานข้อบกพร่อง เนื่องจากคุณสามารถแชร์บันทึกที่แน่นอนของขั้นตอนที่ทำให้เกิดข้อบกพร่องได้ นอกจากนี้ คุณยังส่งออกและเล่นไฟล์ด้วยคลังภายนอกได้อีกด้วย

ส่งออกโฟลว์ผู้ใช้

วิธีส่งออกการไหลเวียนของผู้ใช้

1. เปิดโฟลว์ผู้ใช้ที่ต้องการส่งออก

2. คลิกดาวน์โหลด ส่งออกที่ด้านบนของแผงโปรแกรมบันทึกเสียง

   

3. เลือกรูปแบบใดรูปแบบหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง

   • ไฟล์ JSON ดาวน์โหลดไฟล์บันทึกเสียงเป็นไฟล์ JSON
   • @puppeteer/replay ดาวน์โหลดไฟล์บันทึกเป็นสคริปต์ Puppeteer Replay
   • Puppeteer ดาวน์โหลดไฟล์บันทึกเป็นสคริปต์ Puppeteer
   • Puppeteer (สำหรับ Firefox) ดาวน์โหลดไฟล์บันทึกเสียงเป็นสคริปต์ Puppeteer สำหรับ Firefox
   • การเชิดหุ่น (รวมถึงการวิเคราะห์ Lighthouse) ดาวน์โหลดไฟล์บันทึกเป็นสคริปต์ Puppeteer ที่มีการวิเคราะห์ Lighthouse ฝังอยู่
   • ตัวเลือกอย่างน้อย 1 รายการที่ได้จากส่งออกส่วนขยายของโปรแกรมอัด

4. บันทึกไฟล์

คุณทําสิ่งต่อไปนี้กับตัวเลือกการส่งออกเริ่มต้นแต่ละรายการได้

• JSON แก้ไขออบเจ็กต์ JSON ที่มนุษย์อ่านได้ แล้วนําเข้าไฟล์ JSON กลับไปยัง Recorder
• @puppeteer/replay. เล่นสคริปต์ซ้ำด้วยไลบรารี Puppeteer Replay เมื่อส่งออกเป็นสคริปต์ @puppeteer/replay ขั้นตอนนี้จะยังคงเป็นออบเจ็กต์ JSON ตัวเลือกนี้เหมาะสำหรับกรณีที่คุณต้องการผสานรวมกับไปป์ไลน์ CI/CD แต่ยังคงมีความยืดหยุ่นในการแก้ไขขั้นตอนในรูป JSON จากนั้นจะแปลงและนําเข้ากลับไปยัง Recorder ในภายหลังได้
• สคริปต์ Puppeteer เล่นสคริปต์ซ้ำด้วย Puppeteer เนื่องจากระบบจะแปลงขั้นตอนเป็น JavaScript คุณจึงปรับแต่งได้ละเอียดยิ่งขึ้น เช่น การทำขั้นตอนซ้ำ โปรดทราบว่าคุณไม่สามารถนำเข้าสคริปต์นี้กลับไปยังโปรแกรมอัดเสียงได้
• Puppeteer (สำหรับ Firefox) ในฐานะส่วนหนึ่งของการรองรับ WebDriver BiDi คุณสามารถเรียกใช้สคริปต์ Puppeteer นี้ได้ทั้งใน Chrome และ Firefox

• Puppeteer (รวมถึงการวิเคราะห์ Lighthouse) ตัวเลือกการส่งออกนี้เหมือนกับตัวเลือกก่อนหน้า แต่จะมีโค้ดที่สร้างการวิเคราะห์ Lighthouse ด้วย

  เรียกใช้สคริปต์และดูเอาต์พุตในไฟล์ flow.report.html ดังนี้

  # npm i puppeteer lighthouse
  node your_export.js
  

  

ส่งออกในรูปแบบที่กำหนดเองโดยการติดตั้งส่วนขยาย

ดูส่วนขยายโปรแกรมอัดเสียง

นําเข้าโฟลว์ผู้ใช้

วิธีนําเข้าโฟลว์ผู้ใช้

1. คลิกปุ่มนำเข้า ที่ด้านบนของแผงโปรแกรมอัดเสียง
2. เลือกไฟล์ JSON ที่มีบันทึกเส้นทางของผู้ใช้
3. คลิกปุ่มเล่นซ้ำเพื่อเรียกใช้โฟลว์ผู้ใช้ที่นำเข้า

เล่นซ้ำด้วยคลังภายนอก

Puppeteer Replay เป็นไลบรารีโอเพนซอร์สที่ทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เป็นผู้ดูแล โดยสร้างต่อยอดมาจาก Puppeteer ซึ่งเป็นเครื่องมือบรรทัดคำสั่งที่คุณใช้เล่นไฟล์ JSON ได้

นอกจากนี้ คุณยังเปลี่ยนรูปแบบและเล่นไฟล์ JSON ซ้ำได้ด้วยไลบรารีของบุคคลที่สามต่อไปนี้

เปลี่ยนรูปแบบโฟลว์ผู้ใช้ JSON เป็นสคริปต์ที่กําหนดเอง ดังนี้

• Cypress Chrome Recorder คุณสามารถใช้เครื่องมือนี้เพื่อแปลงไฟล์ JSON ของ User Flow เป็นสคริปต์ทดสอบ Cypress ดูเดโมนี้เพื่อดูวิธีการทำงาน
• Nightwatch Chrome Recorder คุณสามารถใช้ Analytics เพื่อแปลงไฟล์ JSON สำหรับโฟลว์ผู้ใช้เป็นสคริปต์การทดสอบ Nightwatch ได้
• CodeceptJS โปรแกรมบันทึก Chrome คุณสามารถใช้ API นี้เพื่อแปลงไฟล์ JSON ของโฟลว์ผู้ใช้เป็นสคริปต์ทดสอบ CodeceptJS

เล่นซ้ำขั้นตอนของผู้ใช้ JSON

• เล่นซ้ำด้วย Testcafe คุณสามารถใช้ TestCafe เพื่อเล่นไฟล์ JSON ของเส้นทางของผู้ใช้ซ้ำและสร้างรายงานการทดสอบสำหรับการบันทึกเหล่านี้ได้
• เล่นซ้ำด้วย Sauce Labs คุณเล่นไฟล์ JSON ซ้ำได้ใน Sauce Labs โดยใช้ saucectl

ประเด็นสำคัญ: กรณีการใช้งานขั้นสูง: ผสานรวมกับไลบรารี Puppeteer Replay คุณสามารถสร้างคลังของคุณเองนอกเหนือจาก Puppeteer Replay ได้เช่นกัน ไลบรารีการบันทึกซ้ำของ Puppeteer มีวิธีให้คุณปรับแต่งวิธีเรียกใช้ไฟล์บันทึกและ"แปลง" ไฟล์ JSON ของเส้นทางของผู้ใช้ ซึ่งก็คือแปลงไฟล์เป็นรูปแบบอื่น

แก้ไขข้อบกพร่องของโฟลว์ผู้ใช้

บางครั้งคุณต้องแก้ไขข้อบกพร่องของโฟลว์ผู้ใช้ที่บันทึกไว้ เช่นเดียวกับโค้ดอื่นๆ

แผงโปรแกรมบันทึกช่วยให้คุณเล่นซ้ำช้าลง ตั้งจุดหยุดพัก เรียกใช้ทีละขั้นตอน และตรวจสอบโค้ดในรูปแบบต่างๆ ควบคู่ไปกับขั้นตอนต่างๆ เพื่อช่วยแก้ไขข้อบกพร่อง

ชะลอการเล่นซ้ำ

โดยค่าเริ่มต้น โปรแกรมอัดเสียงจะเล่นการไหลเวียนของผู้ใช้ซ้ำให้เร็วที่สุด หากต้องการทำความเข้าใจสิ่งที่เกิดขึ้นในการบันทึก คุณสามารถลดความเร็วในการเล่นซ้ำได้โดยทำดังนี้

1. เปิดเมนูแบบเลื่อนลงเล่นซ้ำ
2. เลือกตัวเลือกความเร็วในการเล่นซ้ำ 1 ตัวเลือก
   • ปกติ (ค่าเริ่มต้น)
   • ช้า
   • ช้ามาก
   • ช้าที่สุด

ประเด็นสำคัญ: คุณใช้ตัวเลือกการเล่นซ้ำช้าเหล่านี้ได้เฉพาะในโปรแกรมอัดเสียงเท่านั้น หากต้องการเพิ่มระยะหมดเวลาในการบันทึก โปรดดูปรับระยะหมดเวลาสำหรับจำนวนก้าว

ตรวจสอบโค้ด

วิธีตรวจสอบโค้ดของขั้นตอนการใช้งานของผู้ใช้ในรูปแบบต่างๆ

1. เปิดไฟล์บันทึกเสียงในแผงโปรแกรมอัดเสียง
2. คลิกแสดงโค้ดที่มุมขวาบนของรายการขั้นตอน
3. เครื่องมือบันทึกจะแสดงมุมมองขั้นตอนและโค้ดของขั้นตอนเคียงข้างกัน
4. เมื่อคุณวางเมาส์เหนือขั้นตอนหนึ่งๆ โปรแกรมบันทึกจะไฮไลต์โค้ดที่เกี่ยวข้องในรูปแบบใดก็ได้ ซึ่งรวมถึงโค้ดที่ได้จากส่วนขยาย

5. ขยายรายการแบบเลื่อนลงของรูปแบบเพื่อเลือกรูปแบบที่ใช้ในการส่งออกการไหลเวียนของผู้ใช้

   

   ซึ่งจะเป็นรูปแบบเริ่มต้น 1 ใน 3 รูปแบบ (JSON, @puppeteer/replay, สคริปต์ Puppeteer หรือเป็นรูปแบบที่มาจากส่วนขยาย

6. ดำเนินการแก้ไขข้อบกพร่องของไฟล์บันทึกโดยแก้ไขพารามิเตอร์และค่าของขั้นตอน มุมมองโค้ดจะแก้ไขไม่ได้ แต่จะอัปเดตตามที่คุณทำการเปลี่ยนแปลงขั้นตอนทางด้านซ้าย

ตั้งค่าเบรกพอยท์และดำเนินการทีละขั้นตอน

วิธีตั้งค่าเบรกพอยท์และดำเนินการทีละขั้นตอน

1. วางเมาส์เหนือวงกลม ถัดจากขั้นตอนในไฟล์บันทึกเสียง วงกลมจะเปลี่ยนเป็นไอคอนจุดหยุดพัก
2. คลิกไอคอนเบรกพอยท์ แล้วเล่นการบันทึกซ้ำ การดำเนินการจะหยุดชั่วคราวที่จุดหยุด
3. หากต้องการทำตามขั้นตอนการดำเนินการ ให้คลิกปุ่มดำเนินการ 1 ขั้นตอน ในแถบการทำงานที่ด้านบนของแผงโปรแกรมอัดเสียง
4. หากต้องการหยุดการเล่นซ้ำ ให้คลิก ยกเลิกการเล่นซ้ำ

แก้ไขขั้นตอน

คุณแก้ไขขั้นตอนใดก็ได้ในการบันทึกโดยคลิกปุ่ม ข้างขั้นตอนนั้น ทั้งในระหว่างและหลังการบันทึก

นอกจากนี้คุณยังเพิ่มขั้นตอนที่ขาดไปและนำออกขั้นตอนที่บันทึกโดยไม่ตั้งใจได้ด้วย

เพิ่มขั้นตอน

บางครั้งคุณอาจต้องเพิ่มขั้นตอนด้วยตนเอง ตัวอย่างเช่น โปรแกรมบันทึกจะไม่บันทึกเหตุการณ์ hover โดยอัตโนมัติเนื่องจากจะทําให้ไฟล์บันทึกมีข้อมูลมากเกินไปและเหตุการณ์ดังกล่าวอาจไม่เป็นประโยชน์เสมอไป แต่องค์ประกอบ UI เช่น เมนูแบบเลื่อนลง จะปรากฏเฉพาะใน hover เท่านั้น คุณสามารถเพิ่มขั้นตอน hover ลงในการไหลเวียนของผู้ใช้ซึ่งขึ้นอยู่กับองค์ประกอบดังกล่าวด้วยตนเอง

วิธีเพิ่มขั้นตอนด้วยตนเอง

1. เปิดหน้าสาธิตนี้และเริ่มการบันทึกใหม่
2. วางเมาส์เหนือองค์ประกอบในวิวพอร์ต เมนูการทำงานจะปรากฏขึ้น
3. เลือกการดำเนินการจากเมนูและสิ้นสุดการบันทึก โปรแกรมบันทึกจะบันทึกเฉพาะเหตุการณ์การคลิกเท่านั้น
4. ลองเล่นการบันทึกซ้ำโดยคลิก เล่นซ้ำ การเล่นซ้ำจะไม่สำเร็จหลังจากหมดเวลาเนื่องจากโปรแกรมอัดเสียงเข้าถึงองค์ประกอบในเมนูไม่ได้
5. คลิกปุ่ม 3 จุดข้างขั้นตอนคลิก แล้วเลือกเพิ่มขั้นตอนก่อนหน้า
6. ขยายขั้นตอนใหม่ โดยค่าเริ่มต้นจะมีประเภท waitForElement คลิกค่าข้าง type แล้วเลือก hover
7. จากนั้น ตั้งค่าตัวเลือกที่เหมาะสมสำหรับขั้นตอนใหม่ คลิก เลือก แล้วคลิกพื้นที่ในองค์ประกอบ Hover over me! ที่อยู่นอกเมนูป๊อปอัป ตัวเลือกตั้งไว้เป็น #clickable
8. ลองเล่นไฟล์บันทึกเสียงอีกครั้ง เมื่อมีการเพิ่มขั้นตอนเมื่อวางเมาส์ไว้ โปรแกรมอัดเสียงจะเล่นซ้ำขั้นตอนดังกล่าวได้สำเร็จ

เพิ่มการยืนยัน

ในระหว่างการบันทึก คุณสามารถยืนยันแอตทริบิวต์ HTML และพร็อพเพอร์ตี้ JavaScript ได้ วิธีเพิ่มการยืนยัน

1. เริ่มบันทึก เช่น ในหน้าเดโมนี้

2. คลิกเพิ่มการยืนยัน

   

   เครื่องมือบันทึกจะสร้างขั้นตอน waitForElement ที่กําหนดค่าได้

3. ระบุตัวเลือกสำหรับขั้นตอนนี้

4. กำหนดค่าขั้นตอนแต่ไม่เปลี่ยนประเภท waitForElement ตัวอย่างเช่น คุณสามารถระบุ

   • แอตทริบิวต์ HTML คลิกเพิ่มแอตทริบิวต์ แล้วพิมพ์ชื่อและค่าของแอตทริบิวต์ที่องค์ประกอบในหน้านี้ใช้ เช่น data-test: <value>
   • พร็อพเพอร์ตี้ JavaScript คลิกเพิ่มพร็อพเพอร์ตี้ แล้วพิมพ์ชื่อและค่าของพร็อพเพอร์ตี้ในรูปแบบ JSON เช่น {".innerText":"<text>"}
   • พร็อพเพอร์ตี้ขั้นตอนอื่นๆ เช่น visible: true

5. บันทึกขั้นตอนการดำเนินการของผู้ใช้ที่เหลือ แล้วหยุดการบันทึก

6. คลิก เล่นซ้ำ หากยืนยันไม่สำเร็จ โปรแกรมอัดเสียงจะแสดงข้อผิดพลาดหลังจากหมดเวลา

ดูวิดีโอต่อไปนี้เพื่อดูเวิร์กโฟลว์นี้

คัดลอกขั้นตอน

แทนที่จะส่งออกขั้นตอนทั้งหมดของผู้ใช้ คุณสามารถคัดลอกขั้นตอนเดียวไปยังคลิปบอร์ดได้ ดังนี้

1. คลิกขวาที่ขั้นตอนที่ต้องการคัดลอก หรือคลิกไอคอน 3 จุด ข้างขั้นตอนนั้น
2. ในเมนูแบบเลื่อนลง ให้เลือกตัวเลือกคัดลอกเป็น... รายการใดรายการหนึ่ง

คุณสามารถคัดลอกขั้นตอนในรูปแบบต่างๆ เช่น JSON, Puppeteer, @puppeteer/replay และรูปแบบที่ได้จากส่วนขยาย

นำขั้นตอนออก

หากต้องการนำขั้นตอนที่บันทึกโดยไม่ตั้งใจออก ให้คลิกขวาที่ขั้นตอนหรือคลิกไอคอน จุดติดกันแล้วเลือกนำขั้นตอนออก

นอกจากนี้ โปรแกรมอัดเสียงจะเพิ่มขั้นตอน 2 ขั้นตอนแยกกันโดยอัตโนมัติในการเริ่มต้นการบันทึกแต่ละครั้ง

• ตั้งค่าวิวพอร์ต ช่วยให้คุณสามารถควบคุมมิติข้อมูล การปรับขนาด และพร็อพเพอร์ตี้อื่นๆ ของวิวพอร์ต
• ไปยังส่วนต่างๆ ตั้งค่า URL และรีเฟรชหน้าเว็บโดยอัตโนมัติสำหรับการเล่นซ้ำทุกครั้ง

หากต้องการทํางานอัตโนมัติในหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บซ้ำ ให้นําขั้นตอนการนำทางออกตามที่อธิบายไว้ข้างต้น

ขั้นตอนการกำหนดค่า

วิธีกำหนดค่าขั้นตอน

1. ระบุประเภทของลิงก์: click, doubleClick, hover, (อินพุต) change, keyUp, keyDown, scroll, close, navigate (ไปยังหน้าเว็บ), waitForElement, waitForExpression หรือ setViewport

   พร็อพเพอร์ตี้อื่นๆ จะขึ้นอยู่กับค่า type

2. ระบุพร็อพเพอร์ตี้ที่จำเป็นใต้ type

   

3. คลิกปุ่มที่เกี่ยวข้องเพื่อเพิ่มพร็อพเพอร์ตี้ที่เจาะจงประเภทที่ไม่บังคับและระบุพร็อพเพอร์ตี้เหล่านั้น

ดูรายการพร็อพเพอร์ตี้ที่ใช้ได้ได้ที่พร็อพเพอร์ตี้ขั้นตอน

หากต้องการนำพร็อพเพอร์ตี้ที่ไม่บังคับออก ให้คลิกปุ่มนำออก ถัดจากพร็อพเพอร์ตี้นั้น

หากต้องการเพิ่มหรือนําองค์ประกอบออกจากพร็อพเพอร์ตี้อาร์เรย์ ให้คลิกปุ่ม + หรือ - ข้างองค์ประกอบ

คุณสมบัติของขั้นตอน

แต่ละขั้นตอนสามารถมีพร็อพเพอร์ตี้ที่ไม่บังคับต่อไปนี้

• target - URL สำหรับเป้าหมาย Chrome DevTools Protocol (CDP) คีย์เวิร์ด main เริ่มต้นหมายถึงหน้าปัจจุบัน
• assertedEvents ที่เป็นกิจกรรม navigation รายการเดียวเท่านั้น

พร็อพเพอร์ตี้ทั่วไปอื่นๆ ที่พร้อมใช้งานสำหรับขั้นตอนประเภทส่วนใหญ่ ได้แก่

• frame - อาร์เรย์ของดัชนีฐาน 0 ซึ่งระบุ iframe ที่ซ้อนได้ เช่น คุณสามารถระบุ iframe แรก (0) ภายใน iframe ที่ 2 (1) ของเป้าหมายหลักเป็น [1, 0]
• timeout - จํานวนมิลลิวินาทีที่จะรอก่อนดําเนินการขั้นตอน ดูข้อมูลเพิ่มเติมได้ที่ปรับการหมดเวลาของขั้นตอน
• selectors - อาร์เรย์ของตัวเลือก ดูข้อมูลเพิ่มเติมได้ที่ทำความเข้าใจตัวเลือก

พร็อพเพอร์ตี้เฉพาะประเภทมีดังนี้

ประเภท	พร็อพเพอร์ตี้	ต้องระบุ	คำอธิบาย
click doubleClick	offsetX offsetY		สัมพันธ์กับด้านซ้ายบนของกล่องเนื้อหาองค์ประกอบเป็นพิกเซล
click doubleClick	button		ปุ่มตัวชี้: หลัก | ตัวช่วย | วินาที | ย้อนกลับ | ไปข้างหน้า
change	value		ค่าสุดท้าย
keyDown keyUp	key		ชื่อคีย์
scroll	x y		ตำแหน่ง x และ y ของการเลื่อนแบบสัมบูรณ์ในพิกเซล โดยค่าเริ่มต้นคือ 0
navigate	url		URL เป้าหมาย
waitForElement	operator		>= | == (ค่าเริ่มต้น) | <=
waitForElement	count		จํานวนองค์ประกอบที่ระบุโดยตัวเลือก
waitForElement	attributes		แอตทริบิวต์ HTML และค่าของแอตทริบิวต์
waitForElement	properties		พร็อพเพอร์ตี้ JavaScript และค่าของพร็อพเพอร์ตี้ใน JSON
waitForElement	visible		บูลีน เป็นจริงหากองค์ประกอบอยู่ใน DOM และมองเห็นได้ (ไม่มี display: none หรือ visibility: hidden)
waitForElement waitForExpression	asserted events		ขณะนี้มีเพียง type: navigation เท่านั้น แต่คุณระบุชื่อและ URL ได้
waitForElement waitForExpression	timeout		เวลาสูงสุดที่รอได้ (มิลลิวินาที)
waitForExpression	expression		นิพจน์ JavaScript ที่แสดงผลเป็น "จริง"
setViewport	width height		ความกว้างและความสูงของวิวพอร์ตเป็นพิกเซล
setViewport	deviceScaleFactor		คล้ายกับอัตราส่วนพิกเซลของอุปกรณ์ (DPR) โดยค่าเริ่มต้นคือ 1
setViewport	isMobile hasTouch isLandscape		แฟล็กบูลีนที่ระบุว่าจะทำสิ่งต่อไปนี้หรือไม่ คำนึงถึงเมตาแท็ก รองรับกิจกรรมการแตะ แสดงในโหมดแนวนอน

มีพร็อพเพอร์ตี้ 2 อย่างที่ทำให้การเล่นซ้ำหยุดชั่วคราว ได้แก่

• พร็อพเพอร์ตี้ waitForElement ทําให้ขั้นตอนรอการปรากฏ (หรือไม่มี) องค์ประกอบจํานวนมากที่ระบุโดยตัวเลือก ตัวอย่างเช่น ขั้นตอนต่อไปนี้จะรอองค์ประกอบน้อยกว่า 3 รายการในหน้าเว็บที่ตรงกับตัวเลือก .my-class

    "type": "waitForElement",
    "selectors": [".my-class"],
    "operator": "<=",
    "count": 2,
  

• พร็อพเพอร์ตี้ waitForExpression ทําให้ขั้นตอนรอให้นิพจน์ JavaScript แสดงผลเป็น "จริง" เช่น ขั้นตอนต่อไปนี้จะหยุดชั่วคราวเป็นเวลา 2 วินาที จากนั้นจะเปลี่ยนเป็น "จริง" เพื่อให้เล่นซ้ำต่อไปได้

    "type": "waitForExpression",
    "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
  

ปรับการหมดเวลาของขั้นตอน

ในกรณีที่หน้าเว็บมีคำขอเครือข่ายที่ช้าหรือมีภาพเคลื่อนไหวที่ใช้เวลานาน การเล่นซ้ำอาจล้มเหลวในขั้นตอนที่เกินระยะหมดเวลาเริ่มต้น 5000 มิลลิวินาที

หากต้องการหลีกเลี่ยงปัญหานี้ คุณสามารถปรับระยะหมดเวลาเริ่มต้นสำหรับแต่ละขั้นตอนพร้อมกัน หรือตั้งค่าระยะหมดเวลาแยกต่างหากสำหรับขั้นตอนหนึ่งๆ โดยระบบจะเขียนทับการหมดเวลาเริ่มต้นสำหรับขั้นตอนที่เฉพาะเจาะจง

วิธีปรับระยะหมดเวลาเริ่มต้นสำหรับแต่ละขั้นตอนพร้อมกัน

1. คลิกการตั้งค่าการเล่นซ้ำเพื่อทำให้ช่องระยะหมดเวลาสามารถแก้ไขได้

   

2. ในช่อง ระยะหมดเวลา ให้ตั้งค่าการหมดเวลาเป็นมิลลิวินาที

3. คลิกเล่นซ้ำเพื่อดูการทำงานของระยะหมดเวลาเริ่มต้นที่ปรับแล้ว

วิธีเขียนทับระยะหมดเวลาเริ่มต้นในขั้นตอนที่ต้องการ

1. ขยายขั้นตอน แล้วคลิกเพิ่มการหมดเวลา

   

2. คลิก timeout: <value> แล้วตั้งค่าเป็นมิลลิวินาที

   

3. คลิกเล่นซ้ำเพื่อดูการทำงานของระยะหมดเวลา

หากต้องการนำการเขียนทับการหมดเวลาในขั้นตอนออก ให้คลิกปุ่มลบ ข้างการหมดเวลานั้น

ทําความเข้าใจตัวเลือก

เมื่อเริ่มการบันทึกใหม่ คุณจะกำหนดค่าสิ่งต่อไปนี้ได้

• ป้อนแอตทริบิวต์การทดสอบที่กําหนดเองในกล่องข้อความแอตทริบิวต์ตัวเลือก โปรแกรมอัดเสียงจะใช้แอตทริบิวต์นี้เพื่อตรวจหาตัวเลือกแทนรายการแอตทริบิวต์ทดสอบทั่วไป

• ในชุดช่องทำเครื่องหมายประเภทตัวเลือกที่จะบันทึก ให้เลือกประเภทของตัวเลือกที่ต้องการให้ตรวจหาโดยอัตโนมัติ ดังนี้

  • CSS ตัวเลือกทางไวยากรณ์
  • ARIA ตัวเลือกเชิงความหมาย
  • ข้อความ ตัวเลือกที่มีข้อความที่ไม่ซ้ำกันสั้นที่สุด (หากมี)
  • XPath ตัวเลือกที่ใช้ XML Path Language
  • Pierce ตัวเลือกที่คล้ายกับตัวเลือก CSS แต่เจาะ Shadow DOM ได้

หมายเหตุ: ดูข้อมูลเพิ่มเติมได้ที่ตัวเลือกเชิงไวยากรณ์กับเชิงความหมายและลําดับความสําคัญของตัวเลือก

ตัวเลือกการทดสอบทั่วไป

สําหรับหน้าเว็บที่เรียบง่าย แอตทริบิวต์ id และแอตทริบิวต์ CSS class ก็เพียงพอแล้วที่โปรแกรมบันทึกจะตรวจหาตัวเลือกได้ อย่างไรก็ตาม กรณีนี้อาจไม่เกิดขึ้นเสมอไปเนื่องจากสาเหตุต่อไปนี้

• หน้าเว็บอาจใช้คลาสหรือรหัสแบบไดนามิกที่เปลี่ยนแปลง
• ตัวเลือกของคุณอาจไม่ทำงานเนื่องจากการเปลี่ยนแปลงโค้ดหรือเฟรมเวิร์ก

เช่น ค่า class ของ CSS อาจสร้างขึ้นโดยอัตโนมัติสําหรับแอปพลิเคชันที่พัฒนาด้วยเฟรมเวิร์ก JavaScript สมัยใหม่ (เช่น React, Angular, Vue) และเฟรมเวิร์ก CSS

ในกรณีเหล่านี้ คุณใช้แอตทริบิวต์ data-* เพื่อสร้างการทดสอบที่ยืดหยุ่นมากขึ้นได้ มีตัวเลือก data-* ทั่วไปที่นักพัฒนาแอปใช้สําหรับการทำงานอัตโนมัติอยู่แล้ว และโปรแกรมอัดเสียงก็รองรับฟีเจอร์เช่นกัน

หากคุณมีการกำหนดตัวเลือกการทดสอบทั่วไปต่อไปนี้ไว้ในเว็บไซต์ โปรแกรมอัดเสียงจะตรวจหาและใช้ตัวเลือกดังกล่าวก่อนโดยอัตโนมัติ

• data-testid
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• data-testing

เช่น ตรวจสอบองค์ประกอบ "Cappuccino" ในหน้าเดโมนี้และดูแอตทริบิวต์ทดสอบ

บันทึกการคลิก "คาปูชิโน" ขยายขั้นตอนที่เกี่ยวข้องในการบันทึก และตรวจสอบตัวเลือกที่ตรวจพบ ดังนี้

ปรับแต่งตัวเลือกของไฟล์บันทึกเสียง

คุณปรับแต่งตัวเลือกของไฟล์บันทึกได้หากตัวเลือกการทดสอบทั่วไปใช้ไม่ได้

ตัวอย่างเช่น หน้าเดโมนี้ใช้แอตทริบิวต์ data-automate เป็นตัวเลือก เริ่มการบันทึกใหม่ แล้วป้อน data-automate เป็นแอตทริบิวต์ตัวเลือก

กรอกอีเมลและดูค่าตัวเลือก ([data-automate=email-address])

ลำดับความสำคัญของตัวเลือก

เครื่องมือบันทึกจะค้นหาตัวเลือกตามลําดับต่อไปนี้ โดยขึ้นอยู่กับว่าคุณระบุแอตทริบิวต์ตัวเลือก CSS ที่กําหนดเองหรือไม่

• หากระบุค่าไว้ ให้ทำดังนี้
  1. ตัวเลือก CSS ที่มีแอตทริบิวต์ CSS ที่กำหนดเอง
  2. ตัวเลือก XPath
  3. ตัวเลือก ARIA หากพบ
  4. ตัวเลือกที่มีข้อความสั้นที่สุดที่ไม่ซ้ำกัน หากพบ
• หากไม่ได้ระบุ ให้ทำดังนี้
  1. ตัวเลือก ARIA หากพบ
  2. ตัวเลือก CSS ที่มีลําดับความสําคัญดังต่อไปนี้
     1. แอตทริบิวต์ที่พบบ่อยที่สุดซึ่งใช้ทดสอบมีดังนี้
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. แอตทริบิวต์รหัส เช่น <div id="some_ID">
     3. ตัวเลือก CSS ปกติ
  3. ตัวเลือก XPath
  4. เครื่องมือเลือกเพียร์
  5. ตัวเลือกที่มีข้อความที่ไม่ซ้ำกันสั้นที่สุด หากพบ

ตัวเลือก CSS, XPath และ Pierce ปกติอาจมีได้หลายรายการ โปรแกรมอัดเสียงจะบันทึกข้อมูลต่อไปนี้

• ตัวเลือก CSS และ XPath ปกติที่ทุกระดับรูท ซึ่งก็คือโฮสต์เงาที่ฝัง (หากมี)
• เครื่องมือเลือกการเพียร์จะไม่ซ้ำกันในองค์ประกอบทั้งหมดภายในรากเงาทั้งหมด