จำลองและทดสอบเบราว์เซอร์อื่นๆ

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

สรุป

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

โปรแกรมจำลองเบราว์เซอร์

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

Firefox มุมมองการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

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

การจำลอง F12 ของ Edge

หากต้องการจำลอง Windows Phone ให้ใช้การจำลองในตัวของ Microsoft Edge

เนื่องจาก Edge ไม่ได้ให้บริการร่วมกับความเข้ากันได้กับระบบเดิม โปรดใช้การจำลองของ IE 11 เพื่อจำลองวิธี จะดูใน Internet Explorer เวอร์ชันเก่าๆ

โปรแกรมจำลองและอุปกรณ์จำลอง

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

โปรแกรมจำลองของ Android

เบราว์เซอร์สต็อกในโปรแกรมจำลอง Android

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

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

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

Chromium Content Shell ใน Android

เชลล์เนื้อหาของโปรแกรมจำลอง Android

หากต้องการติดตั้ง Chromium Content Shell สำหรับ Android ให้ปล่อยให้โปรแกรมจำลองทำงานและเรียกใช้ดังนี้ ที่พรอมต์คำสั่ง:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

ตอนนี้คุณทดสอบเว็บไซต์ด้วย Chromium Content Shell ได้แล้ว

Firefox บน Android

ไอคอน Firefox ในโปรแกรมจำลอง Android

คุณสามารถรับ APK เพื่อติดตั้ง Firefox ในโปรแกรมจำลอง ซึ่งคล้ายกับ Content Shell ของ Chromium

ดาวน์โหลดไฟล์ .apk ที่ถูกต้องจาก https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

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

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

เครื่องมือจำลอง iOS

เครื่องจำลอง iOS สำหรับ Mac OS X มาพร้อมกับ Xcode ซึ่งคุณสามารถติดตั้งจาก App Store

เมื่อเสร็จแล้ว ให้ดูวิธีใช้งานเครื่องจำลองในเอกสารของ Apple

Modern.IE

VM ของ IE สมัยใหม่

เครื่องเสมือน Modern.IE ช่วยให้คุณสามารถเข้าถึง IE เวอร์ชันต่างๆ บนคอมพิวเตอร์ของคุณผ่าน VirtualBox (หรือ VMWare) เลือกเครื่องเสมือนในหน้าดาวน์โหลดที่นี่

โปรแกรมจำลองและเครื่องจำลองในระบบคลาวด์

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

• BrowserStack (เชิงพาณิชย์) ใช้งานง่ายที่สุดสำหรับการทดสอบด้วยตนเอง คุณเลือกการดำเนินการ ให้เลือกเวอร์ชันเบราว์เซอร์และประเภทอุปกรณ์ เลือก URL เพื่อเรียกดู จากนั้น URL จะหมุน ที่โฮสต์ไว้ด้วยตนเอง ที่คุณสามารถโต้ตอบด้วยได้ นอกจากนี้คุณยังสามารถเริ่มการทำงานของโปรแกรมจำลองหลายๆ ตัวใน หน้าจอเดียวกัน ช่วยให้คุณทดสอบรูปลักษณ์ของแอปในอุปกรณ์ต่างๆ ได้เหมือนกัน
• SauceLabs (เชิงพาณิชย์) ช่วยให้คุณทำการทดสอบ 1 หน่วยภายในโปรแกรมจำลองได้ ซึ่งสามารถ มีประโยชน์อย่างมากสำหรับการเขียนสคริปต์ให้ ไปยังส่วนต่างๆ ในเว็บไซต์ และดูวิดีโอบันทึก หลังจากนั้นบนอุปกรณ์ต่างๆ นอกจากนี้คุณยังทำการทดสอบด้วยตนเองกับเว็บไซต์ของคุณได้อีกด้วย
• Device Anywhere (เชิงพาณิชย์) ไม่ได้ใช้โปรแกรมจำลอง แต่เป็นอุปกรณ์จริงที่คุณควบคุมได้ จากระยะไกล ซึ่งมีประโยชน์มากในกรณีที่คุณต้องการจำลองการเกิดปัญหา อุปกรณ์ และไม่เห็นข้อบกพร่องในตัวเลือกใดๆ ในคำแนะนำก่อนหน้านี้
• LambdaTest (เชิงพาณิชย์) จะช่วยคุณทำการทดสอบข้ามเบราว์เซอร์ด้วยตนเองในชุดค่าผสม กว่า 2,000 เบราว์เซอร์และ ระบบปฏิบัติการ ผู้ใช้จะสามารถบันทึกวิดีโอข้อบกพร่องที่ซับซ้อน ก็สามารถแชร์ข้อมูลผ่านการผสานรวมอย่าง MS Teams, Slack และอีกมากมาย ผู้ใช้สามารถเร่งการทดสอบได้โดย ทำการทดสอบพร้อมกัน