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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

ปุ่มแสดงทางลัด

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

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

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

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

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

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

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

    ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบได้ที่หัวข้อส่งออก 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

    เปิดรายงาน Lighthouse ใน Chrome

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

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

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

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

  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

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

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

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

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

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

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

เล่นซ้ำช้า

ตรวจสอบโค้ด

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

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

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

    รายการแบบเลื่อนลงรูปแบบ

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

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

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

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

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

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

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

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

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

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

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

  1. เปิดหน้าสาธิตนี้และเริ่มการบันทึกใหม่ เริ่มบันทึกเพื่อจับภาพเหตุการณ์การโฮเวอร์
  2. วางเมาส์เหนือองค์ประกอบในวิวพอร์ต เมนูการทำงานจะปรากฏขึ้น กําลังวางเมาส์เหนือองค์ประกอบ
  3. เลือกการดำเนินการจากเมนูและสิ้นสุดการบันทึก โปรแกรมบันทึกจะบันทึกเฉพาะเหตุการณ์การคลิกเท่านั้น คลิกการดำเนินการและสิ้นสุดการบันทึก
  4. ลองเล่นการบันทึกซ้ำโดยคลิก เล่นซ้ำ เล่นซ้ำ การเล่นซ้ำจะไม่สำเร็จหลังจากหมดเวลาเนื่องจากโปรแกรมอัดเสียงเข้าถึงองค์ประกอบในเมนูไม่ได้ เล่นซ้ำไม่สำเร็จ
  5. คลิกปุ่ม ปุ่ม 3 จุด 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 จุด เมนู 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 ที่ 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

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