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

ดูวิธีแชร์โฟลว์ของผู้ใช้ แก้ไข และขั้นตอนต่างๆ ในข้อมูลอ้างอิงฟีเจอร์ที่ครอบคลุมของแผงโปรแกรมบันทึกของ Chrome DevTools

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

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

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

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

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

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

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

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

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

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

   • JSON
   • สคริปต์ @puppeteer/replay
   • สคริปต์ Puppeteer
   • Puppeteer (รวมถึงการวิเคราะห์ Lighthouse)

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

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

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

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

แชร์ขั้นตอนของผู้ใช้

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

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

วิธีส่งออก Funnel ของผู้ใช้

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

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

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

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

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

  # npm i puppeteer lighthouse
  node your_export.js
  

  

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

ดูส่วนขยายสำหรับโปรแกรมบันทึก

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

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

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

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

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

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

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

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

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

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

แก้ไขข้อบกพร่องของขั้นตอนของผู้ใช้

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

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

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

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

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

ตรวจสอบโค้ด

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

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

5. ขยายรายการแบบเลื่อนลงของรูปแบบเพื่อเลือกรูปแบบที่คุณใช้ส่งออก Funnel ของผู้ใช้

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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