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

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

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

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

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

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

วิธีปรับแต่งแป้นพิมพ์ลัดของโปรแกรมอัดเสียง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• JSON แก้ไขออบเจ็กต์ JSON ที่มนุษย์อ่านได้และนำเข้าไฟล์ JSON กลับไปยังโปรแกรมอัดเสียง
• @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. คลิกปุ่มเล่นซ้ำเพื่อเรียกใช้โฟลว์ผู้ใช้ที่นำเข้า

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

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

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

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

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

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

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

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

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

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

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

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

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 แต่สามารถเจาะ 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

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

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

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

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

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