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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

   • ไฟล์ JSON
   • @puppeteer/replay
   • [Puppeteer](/docs/puppeteer/ สคริปต์
   • Puppeteer (รวมถึงการวิเคราะห์ของ Lighthouse)

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

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

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

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

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

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

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

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

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

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

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

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

  เรียกใช้สคริปต์และตรวจสอบผลลัพธ์ในไฟล์ flow.report.html:

  # npm i puppeteer lighthouse
  node your_export.js
  

  

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

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

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

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

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

เล่นซ้ำด้วยไลบรารีภายนอก

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

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

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

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

เล่นโฟลว์ผู้ใช้ JSON ซ้ำ:

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

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

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

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

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

เล่นซ้ำช้าลง

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

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

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

ตรวจสอบโค้ด

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

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 รวมถึงรูปแบบที่มาจากส่วนขยาย

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

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

นอกจากนี้ โปรแกรมอัดเสียงจะเพิ่มขั้นตอนแยกกัน 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 ที่สอง (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
  • Pierce ตัวเลือกที่คล้ายกับ CSS แต่สามารถเจาะ Shadow DOM ได้

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

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

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

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

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

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

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

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

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

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

ปรับแต่งตัวเลือกการบันทึก

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

ตัวอย่างเช่น หน้าสาธิตนี้ใช้แอตทริบิวต์ 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 ปกติในทุกระดับรูท ซึ่งก็คือโฮสต์เงาที่ซ้อนกันอยู่ (หากมี)
• ตัวเลือกเพียร์ที่ไม่ซ้ำกันในองค์ประกอบทั้งหมดภายในรากเงาทั้งหมด