การทดสอบรูปแบบที่ปรับเปลี่ยนได้

โกลอฟนาฮาร์ดไดรฟ์ งานที่สำคัญที่สุดอย่างหนึ่งที่แผนก QA ของ EastBanc Technologies ต้องเผชิญคือการสร้างระบบทดสอบไซต์อัตโนมัติ

www.washingtonpost.com - นี่คือหนังสือพิมพ์อิเล็กทรอนิกส์ที่จำหน่ายบนเว็บไซต์ข้อมูลและพอร์ทัลใหม่เหตุผลหลักที่จำเป็นต้องสร้างระบบทดสอบอัตโนมัติคือ นอกเหนือจากการวางแผนการเปลี่ยนไปใช้ CMS ใหม่ (หรือที่เรียกว่า PageBuilder) แล้ว ยังจำเป็นต้องแทนที่ CMS อื่นๆ จำนวนหนึ่งที่ใช้ในการเผยแพร่เนื้อหาในส่วนต่างๆ ของเว็บไซต์คุณ

ด้วยการย้ายข้อมูลประเภทนี้ สิ่งสำคัญคือต้องไม่ยอมให้เกิดการประนีประนอมเพื่อเผยแพร่ผ่านช่องทางใหม่
เนื้อหาซีเอ็มเอส

ในหน้าต่างๆ เรียงตามลำดับให้ถูกต้อง

เราไม่สามารถตรวจสอบทุกหน้าว่าสอดคล้องกับการทดสอบของเราหรือไม่

งานของเราคือการระบุข้อบกพร่องของ PageBuilder ตรวจสอบความน่าเชื่อถือของเค้าโครงของหน้าเว็บที่สร้างโดย PageBuilder ใหม่ และเพิ่มความเคารพต่อบรรณาธิการของ Washington Post สำหรับความแตกต่างของหน้าเว็บใดหน้าหนึ่งซึ่งมีเนื้อหาที่อาจนำไปสู่ปัญหาที่อาจเกิดขึ้นกับหน้าที่แสดงผล nok .การสร้างระบบทดสอบอยู่ในขั้นตอนของการพัฒนาอย่างแข็งขัน หรือจากที่เห็นแล้ว สามารถนำขึ้นศาลประชาชนทั่วไปได้แล้ว ก่อนที่เราจะเริ่มต้น จำเป็นต้องทราบคุณลักษณะหนึ่งของโครงการ: การทดสอบทั้งหมดที่เราทำคือ "การโทร"

โตโต้
เราและสมาชิกคนอื่นๆ กำลังจะทดสอบเว็บไซต์เวอร์ชันต่อสู้

การเลือกเครื่องมือสำหรับการทดสอบโครงร่าง

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

เพื่อทดสอบโครงด้านข้าง เราใช้โครงแบบพิเศษ

การทดสอบ Galen และภาพหน้าจอสามารถแทนที่การทดสอบการทำงานหลายประเภทที่ทำงานในบางกรณีได้สำเร็จ บางครั้งในโค้ดความเร็ว และบางครั้งในทั้งสองอย่าง

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

ตัวอย่างเช่น มี 2 บล็อกในการตรวจสอบว่าเราได้เขียนการทดสอบการทำงานครั้งแรก: บล็อกที่อ่านมากที่สุดและบล็อกข้อมูล


ตอนนี้เรากำลังตรวจสอบอันแรกด้วยภาพหน้าจอ และอีกอันด้วยการทดสอบ Galen MostRead Block ตรวจสอบโดยการทดสอบภาพหน้าจอ:นอกเหนือจากการทดสอบการทำงานแล้ว: มีโค้ดแถวน้อยลงอย่างมาก ความครอบคลุมของการทดสอบก็เพิ่มขึ้น และการอัปเดตการทดสอบเมื่อมีการเปลี่ยนแปลง

จากภายนอกมองเข้ามา

บล็อกนี้บนไซต์ไม่ได้พูดคุยกันเป็นเวลาหลายชั่วโมงแล้ว


การทดสอบบล็อกนี้ได้รับการตรวจสอบในส่วนเกี่ยวกับวิธีการจับภาพหน้าจอ

บล็อกข้อมูล WaPo:

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

ระบบอัตโนมัติการทดสอบ Vikory: Java, Maven, TestNG,

Selenium WebDriver, ตารางซีลีเนียม, Galen Frameworkการทดสอบตามภาพหน้าจอของเราได้รับการสนับสนุนอย่างแข็งขันโดยชุดยูทิลิตี้ข้ามแพลตฟอร์ม ImageMagick.

ฉันอยากจะชี้ให้เห็นทันทีว่าเราเขียนโค้ดทดสอบใน Java โดยใช้รูปแบบ PageObject และเฟรมเวิร์ก Yandex -

องค์ประกอบ HTML

- หากต้องการรันการทดสอบ ให้ใช้ maven และ testNG

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

โปรดทราบว่าเรายังอยู่ในขั้นตอนการวิจัยเกี่ยวกับวิธีการจัดระเบียบกระบวนการทดสอบทั้งหมดอย่างเหมาะสม และแนวทางบางส่วนยังไม่ได้รับการเรียนรู้และทดสอบอย่างสมบูรณ์การทดสอบเพื่อขอความช่วยเหลือ Galen Framework - เพื่ออธิบายหลักการทำงานกับ Galen โดยย่อจะมีลักษณะดังนี้: คุณเขียนข้อกำหนดเฉพาะของหน้า (นั่นคือสิ่งที่เรียกว่าไฟล์ข้อมูลจำเพาะ) ไฟล์ vikory และเอกสารพิเศษ เอกสารที่ดีและไวยากรณ์ที่สมเหตุสมผล

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






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




ตัวอย่างเช่นไม่มี




การกลับรายการผ่านไปแล้ว

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

ไฟล์ Javascript ที่ต้องจัดเก็บไว้ในเพจที่เปิดใช้งานก่อนที่จะตรวจสอบไฟล์ .spec (เช่น หากต้องการตรวจสอบการแสดงผลของเพจบนเว็บไซต์ของเว็บไซต์)

ชื่อของไฟล์ .spec

แท็กที่ต้องแก้ไขก่อนแก้ไขไฟล์ .spec (เช่น เดสก์ท็อป ทั้งหมด เนื่องจากเรากำลังทดสอบเลย์เอาต์สำหรับเดสก์ท็อป)

เมื่อคุณเปลี่ยนพารามิเตอร์ที่มอบให้กับ Galen คุณสามารถบรรลุผลการทดสอบกรอบการทำงานของเว็บไซต์ของเราได้เกือบทั้งหมด

เราตัดสินใจโดยไม่ยุ่งยากมากนักในการเลือกหน้าสุ่มจากชุดย่อยเมื่อเรียกใช้ชุดทดสอบ (นั่นคือเพื่อทดสอบชุดย่อยของหน้าสูตรอาหาร เราได้เลือกหนึ่งในสูตรอาหารและส่ง URL นั้นไปยังการทดสอบทั้งหมดจากเค้าโครง)

เนื่องจากไม่สามารถตรวจสอบทุกหน้าล่วงหน้าได้ ตัวเลือกในการเลือกหน้าสุ่มจึงดูเหมาะสมที่สุด




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

ตัวอย่างเช่น มี 2 ตัวเลือกในการแสดงหน้าประเภทเดียวกัน - หน้าสูตรอาหาร โดยหนึ่งในนั้นเค้าโครงมีดังต่อไปนี้:

จากก้น คุณจะเห็นว่าบล็อก "อ่านมากที่สุด" ซึ่งตั้งอยู่ทางด้านขวาของด้านข้าง ส่วนใหญ่จะอยู่ทางด้านซ้าย ไม่ใช่ทางด้านขวา

ในการตรวจสอบการมีอยู่ของปัญหาดังกล่าว จำเป็นต้องตรวจสอบหลายหน้าและพิจารณาปัจจัยหลายประการ

สิทธิ์ในการทำการทดสอบมีอะไรบ้าง

สำหรับผู้เริ่มต้น ช่วงสิทธิ์ที่ถูกต้องทั้งหมดจะแบ่งออกเป็นช่วงเค้าโครง

เลย์เอาต์นั้นเป็นแบบฮิวมิก แต่การวางบล็อกที่แตกต่างกันทำให้สามารถแบ่งเขตได้
เป็นการยากที่จะกำหนดขอบเขตระหว่างเลย์เอาต์ - ต้องใช้งานมากในเบราว์เซอร์ และเราสามารถดูว่าจุดขอบเขตใดที่บล็อกหน้าเปลี่ยนแปลง: เลย์เอาต์ ความสอดคล้อง และ/หรือลักษณะการทำงาน
เพื่อความเรียบง่าย เราจึงใช้ความกว้างของพอร์ตให้น้อยที่สุดเท่าที่จะเป็นไปได้
ตอนนี้ตารางมีอยู่:
เดสก์ท็อป: สูงสุด 1920px, ขั้นต่ำ 1018px;

แล็ปท็อป: สูงสุด 1,017px, ขั้นต่ำ 769px;

แท็บเล็ต: สูงสุด 768px, ขั้นต่ำ 481px;

เพื่อทดสอบโครงด้านข้าง เราใช้โครงแบบพิเศษ

มือถือ: สูงสุด 480px, ต่ำสุด 361px;

SMALL_MOBILE: สูงสุด 360px, ต่ำสุด 280px

ก่อนที่ฉันจะพูด เราได้ตัดสินใจที่จะไม่ทดสอบรูปแบบ SMALL_MOBILE เนื่องจากจำนวนผู้ที่ดู Washington Post บนอุปกรณ์ของตนโดยได้รับอนุญาตดังกล่าวนั้นมีน้อยมาก (เป็นการเปลี่ยนแปลงง่ายๆ และไม่มีปัญหาในการเพิ่มในระหว่างการทดสอบ) .

การทดสอบไม่มี 4 ช่วงอีกต่อไป ซึ่งช่วยให้ใช้เลย์เอาต์ที่แตกต่างกันได้

ด้านล่างนี้เป็นโค้ดสำหรับการรันการทดสอบ Galen สำหรับการอนุญาตเดสก์ท็อป:

เมื่อคุณรันการทดสอบสกิน Galen จะได้รับตัวอย่างแบบสุ่มภายในช่วงสำหรับโครงร่างที่กำหนด (getRandomResolution(DESKTOP)):

มาดูกันว่าแนวทางนี้ช่วยเราทดสอบสูตรได้อย่างไร

การทดสอบเฟรมด้านข้างของสูตรจะดำเนินการสำหรับความกว้างของวิวพอร์ตที่ 768px ถึง 1017pxมาดูด้านก้นกัน:

www.washingtonpost.com/pb/recipes/maple-banana-frozen-yogurt/14143/

ทดสอบที่ขอบเขตของเค้าโครงแล็ปท็อป (1017px และ 768px) โดยไม่พบปัญหาใดๆ

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

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

เพื่อทดสอบโครงด้านข้าง เราใช้โครงแบบพิเศษ

มุมมองที่ถูกต้อง:

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

เพื่อทดสอบโครงด้านข้าง เราใช้โครงแบบพิเศษ

เค้าโครงของซลามาน:

วิธีการทดสอบตามภาพหน้าจอ เมื่อสูดดมบทความ

เราใช้วิธีการทดสอบตามภาพหน้าจอ

ก่อนจะพูด เพื่อทดสอบเลย์เอาต์ก่อน เราใช้วิธีนี้

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



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

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

แกนดูเหมือนว่าบล็อก MostRead นี้เปิดอยู่

หน้าหลัก washingtonpost.com (มือซ้าย) รุ่นที่เราจะอ้างอิงถึงภาพหน้าจอของบล็อกนี้ (มือขวา):รหัสทดสอบมีลักษณะดังนี้:

@Test (กลุ่ม = ("ภาพหน้าจอ")) @WebTest (

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

เมื่อปรากฎว่าการสะสมข้อมูลเกี่ยวกับบล็อกที่ต้องการอาจอยู่ในหลายปัจจัยเช่น:

• เวอร์ชันของระบบปฏิบัติการ
• ธีมระบบปฏิบัติการ
• เบราว์เซอร์เวอร์ชัน yogo
• พารามิเตอร์ต่างๆ สำหรับการปรับแบบอักษรให้เรียบและการเร่งด้วยฮาร์ดแวร์

ปัญหาแรกคือขนาดของภาพหน้าจอที่รวบรวมมีการเปลี่ยนแปลงเนื่องจากการปรับระบบปฏิบัติการและเบราว์เซอร์

ในการสร้างขนาดของบล็อกและภาพหน้าจอคุณต้องเปิดเบราว์เซอร์ด้วยขนาดคงที่ คุณสามารถเปลี่ยนขนาดของหน้าต่างเบราว์เซอร์ได้โดยใช้วิธีการควบคุมเว็บเพิ่มเติม: driver.manage().window().setSize(requiredSize)ด้วยวิธีนี้ เราจะระบุขนาดของหน้าต่าง ไม่ใช่ขนาดของพื้นที่ที่มองเห็นได้ซึ่งเราต้องการ - การนำเข้า

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

ปัญหาอีกประการหนึ่งที่เราพบคือความแตกต่างในการแสดงแบบอักษรในเบราว์เซอร์ผ่านการตั้งค่าการป้องกันนามแฝง

เราพยายามแก้ไขปัญหาการติดตั้ง

การปรับเปลี่ยนต่างๆ เบราว์เซอร์ เช่น: layer.acceleration.disabled

gfx.font_rendering.cleartype_params.rendering_mode washingtonpost.com (มือซ้าย) รุ่นที่เราจะอ้างอิงถึงภาพหน้าจอของบล็อกนี้ (มือขวา): gfx.direct2d.disabled น่าเสียดายที่มันไม่ได้ช่วยอะไรนอกจากนี้ ในการจัดแนวภาพหน้าจอ ยูทิลิตี ImageMagick จะใช้พารามิเตอร์ เช่น fuzz ซึ่งระบุความหลากหลายสูงสุดของภาพหน้าจอ

ความมีคุณธรรมของนามากลาสยา

ปัญหาชิว

ทดลองกับพารามิเตอร์นี้


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


วิธีแก้ไขคือตรวจสอบทุกคนอีกครั้ง


CommandException เพื่อบอกเราเกี่ยวกับผู้ที่มีการจัดตำแหน่งรูปภาพกว้าง 251px:



นอกจากนี้ยังมีสถานการณ์ที่ไม่รักษาขนาดของภาพหน้าจอ




ในกรณีนี้ เราปฏิเสธเสียงต่อไปนี้:

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

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

เราสามารถมีโมเดลจำนวนหนึ่งสำหรับบล็อก thePostMost โดยใช้ชื่อต่อไปนี้: HomePage_thePostMost.png, HomePage_thePostMost (1).png และโมเดลทั้งหมดมีความสำคัญ โชคดีที่จำนวนตัวเลือกดังกล่าวสำหรับ Kintsev ไม่เกิน 2ด้านเทคนิค

ปรากฎว่าสแต็คเทคโนโลยีที่ใช้สำหรับการเขียนและรันการทดสอบคือ: Java, Maven, TestNG, Selenium, Galen Framework

นอกจากนี้ผลการทดสอบจะถูกส่งไปยังกราไฟท์

การทดสอบที่รันอยู่ดำเนินการโดยตรงโดยใช้ Jenkins CIS อย่าคิดว่าเหตุใดจึงมีการเลือกเช่นนี้หรือเมนูหลักในส่วนหัว

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

สามารถหลีกเลี่ยงความเมื่อยล้าได้หากจำเป็นต้องประท้วงเค้าโครงบนหน้าเทมเพลตประเภทเดียวกันกับที่ไม่จำเป็น

ตรรกะการทำงาน

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

นอกจากนี้ยังมีความเข้าใจที่ดีเกี่ยวกับการทดสอบข้ามเบราว์เซอร์โดยคำนึงถึงรูปแบบที่ปรับเปลี่ยนได้ของแอปพลิเคชัน

สวัสดีผู้อ่านบล็อกที่รัก

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

และแน่นอนว่าผู้ออกแบบเลย์เอาต์จำเป็นต้องปักมันด้วย

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

และฉันอยากจะบอกว่าไซต์นั้นอ่านได้ง่ายกว่ามากบนอุปกรณ์ดังกล่าวหากไม่มีมัน

วันนี้ฉันอยากจะแนะนำคุณเกี่ยวกับบริการที่น่าสนใจและเจ๋งๆ 5 อย่าง ซึ่งคุณสามารถตรวจสอบความสามารถในการปรับตัวของเว็บไซต์ได้

ไปกันเลย

5 บริการที่คุณสามารถตรวจสอบไซต์เพื่อการปรับตัวได้

www.responsivedesigntest.net

บริการที่ดีในการตรวจสอบเว็บไซต์ ไม่มีการอนุญาตสำหรับหน้าจอทั้งบนแท็บเล็ตและโทรศัพท์ mattkersley.com

บริการง่ายๆ สำหรับการตรวจสอบเว็บไซต์โดย Matt Kersley

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

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

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

ปัญหาในการทดสอบการออกแบบเว็บแบบตอบสนอง

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

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

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

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

อย่างไรก็ตาม การทดสอบบนอุปกรณ์เคลื่อนที่จริงถือเป็นข้อพิสูจน์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิง

โปรแกรมจำลอง Vikoristanโปรแกรมจำลองมือถือ

- นี่คือการจำลองเว็บว่าเว็บไซต์และโปรแกรมจะแสดงและทำงานอย่างไรในสภาพแวดล้อมแบบเคลื่อนที่

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

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

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

ต่อไปนี้เป็นกฎพื้นฐานบางประการสำหรับการทดสอบการออกแบบเว็บที่ตอบสนอง:

1. ข้อความ องค์ประกอบ และรูปภาพถูกต้อง
2. โซนการคลิกสูงสุด
3. สี การแรเงา และการไล่ระดับสีบ่งบอกถึง
4. ตรวจสอบว่าได้เติมขอบอย่างถูกต้อง
5. ข้อความ รูปภาพ องค์ประกอบ และเฟรมจะไม่หายไปจากขอบหน้าจอ
6. ขนาดตัวอักษร สไตล์ และสีสอดคล้องกับประเภทสกินของข้อความ
7. ข้อความที่เลื่อน (ป้อนข้อมูล) จะแสดงอย่างถูกต้อง

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

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

ในตอนท้าย

ค้นหาว่าโปรแกรมเว็บได้รับการปรับแต่งอย่างไร

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

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

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

Shvidka แก้ไขเค้าโครงแบบปรับได้

อินเทอร์เน็ตเบราว์เซอร์ยอดนิยม (เบราว์เซอร์) Mozilla ไฟร์ฟอกซ์ติดตั้งเครื่องมือในตัวสำหรับตรวจสอบการออกแบบเว็บไซต์ให้เหมาะสมก่อนแสดงบนอุปกรณ์มือถือ หากต้องการเริ่มต้นอย่างรวดเร็ว ให้ไปที่ "เมนู" - "Rozrobka" - "การออกแบบที่ปรับเปลี่ยนได้"

หรือเพียงแค่กดสามปุ่มบนคีย์บอร์ดพร้อมกัน

++[เอ็ม]

คุณควรทาสีสิ่งนี้: ด้วยการเปลี่ยนขนาดและการวางแนวของหน้าจอ คุณสามารถตรวจสอบว่าเว็บไซต์ของคุณแสดงบนอุปกรณ์มือถืออย่างไรเบราว์เซอร์ Google ).

โครเมียม หากต้องการเริ่มต้นอย่างรวดเร็ว ให้ไปที่ "เมนู" - "Rozrobka" - "การออกแบบที่ปรับเปลี่ยนได้"):

อาจมีการสนับสนุนให้แก้ไขความสามารถในการปรับตัวของการออกแบบเว็บไซต์

โดยไปที่เมนูเลือกรายการ "เครื่องมือเพิ่มเติม" จากนั้นเลือก "เครื่องมือออกแบบ" (หรือกดปุ่ม

หลังจากนั้นให้กดไอคอนเพื่อการออกแบบที่ปรับเปลี่ยนได้ (หรือกดบนแป้นพิมพ์ทันที ตรงกลางหน้าจอคุณจะเห็นว่าไซต์ของคุณปรากฏบนหน้าจออุปกรณ์มือถืออย่างไร:การทดสอบ SEO ของการออกแบบมือถือ

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

หากต้องการตรวจสอบความสามารถในการปรับตัว ให้ขอความช่วยเหลือ

บริการของกูเกิล

เราไปที่ที่อยู่ถัดไปและป้อนชื่อเว็บไซต์ของคุณ:

https://www.google.com/webmasters/tools/mobile-friendly/ แกนมีลักษณะเช่นนี้จากการตรวจสอบบล็อกของฉัน:ด้วย Yandex จะซับซ้อนกว่าเล็กน้อยในการตรวจสอบคุณต้องลงทะเบียนในบริการ Yandex.Webmaster และเข้าถึงอินเทอร์เฟซเวอร์ชันเบต้าอย่างรวดเร็ว:

บริการทดสอบความสามารถในการปรับตัวแบบออนไลน์

นำเสนอ (แสดง) เว็บไซต์ของคุณปรากฏต่อแผนกหลักของบริการเหล่านี้อย่างไร

อุปกรณ์เคลื่อนที่

- ไม่มีเว็บไซต์ที่มีฟังก์ชันดังกล่าว

Symby.ru ปรับตัวได้ดีที่สุด

เพื่อไม่ให้สร้างภาพลักษณ์ของ "ผู้ปลูกแฮมชีส" ฉันจะชี้ไปที่ไซต์อื่น: http://symby.ru/adaptest/

ด้านหนึ่งคุณจะเห็นหน้าจอต่างๆ มากมาย

ความเร็วของเว็บไซต์เวอร์ชันมือถือ

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

กลับมาเป็นร้อยมือถือยกอีกครั้ง

ข้อมูลเชิงลึกของ PageSpeed

Google ล้ำหน้าไปทั่วโลกเสมอ: https://developers.google.com/speed/pagespeed/insights/

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

การทดสอบหน้าเว็บ และสุดท้ายนี้ ฉันจะยกตัวอย่างบริการให้คุณ ซึ่งไม่เพียงแต่แสดงให้เห็นว่าไซต์มีลักษณะอย่างไรบนอุปกรณ์มือถือ แต่ยังแสดงความเร็วของหุ่นยนต์ด้วย: http://www.webpagetest.org/วิสนอฟกี

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

โครเมียมนั้น

ดังนั้นจึงจำเป็นอย่างยิ่งที่จะต้องตรวจสอบความภักดีของระบบเสียงต่อการออกแบบของคุณ

จากนั้นเพื่อความอุ่นใจหรืออวดอ้างคุณสามารถใช้บริการออนไลน์ได้อย่างรวดเร็ว มุมมองของผู้เขียน:"อย่าลืมเปลี่ยนขนาดเบราว์เซอร์ของคุณ คุณจะเห็นมันเร็วๆ นี้!" คุณได้ยินมันบ่อยแค่ไหน?อาจจะไม่บ่อยนักอีกต่อไป แต่ถ้าคุณพัฒนาเว็บไซต์แบบตอบสนอง คุณจะรู้ว่าฉันกำลังพูดถึงอะไร: เมื่อคุณแก้ไข DOM และ CSS เป็นระยะๆ คุณลากขอบของเบราว์เซอร์มาที่นี่และที่นั่น ทำการทดสอบการเปลี่ยนแปลง และมองหาความไม่ถูกต้องใด ๆ

เหตุใดจึงต้องรบกวนผู้ค้าปลีก?

ปัจจุบันมีเครื่องมือบนเบราว์เซอร์ที่เหมาะกับขนาดหน้าจอบนอุปกรณ์ต่างๆ เพิ่มมากขึ้น

แน่นอนว่าเครื่องมือที่แตกต่างกันนั้นมาพร้อมกับชุดคุณลักษณะและระดับประสิทธิภาพที่แตกต่างกัน

มาดูการกระทำของพวกเขากันที่นี่

เพื่อวัตถุประสงค์ในการทดสอบ ฉันได้สร้างเว็บไซต์ที่สามารถปรับเปลี่ยนได้อย่างแท้จริงแห่งแรกที่ฉันสร้างขึ้น นั่นก็คือ PyjamasOnYourFeet.com

จากเทมเพลต Brownie HTML5 มันเจ๋งมากและไม่เป็นอันตรายต่อจุดแข็งของนักพัฒนาบน EGrappler

ฉันตอบสนองหรือไม่?

ฉันตอบสนองหรือไม่?

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

เพิ่มขนาดแล้วดูอีกครั้ง:

เดสก์ท็อป - 1600 x 992px ซึ่งจะเปลี่ยนแปลงหลังจากปรับขนาด (0.3181)

แล็ปท็อป - 1280 x 802px ซึ่งแตกต่างกันไปเกินกว่าขนาด (0.277)

แท็บเล็ต - 768 x 1024px ซึ่งเปลี่ยนแปลงตามขนาด (0.219)

อุปกรณ์เคลื่อนที่ - 320 x 480px ซึ่งเปลี่ยนแปลงหลังจากมาตราส่วน (0.219)

การอ้างอิงถึงผู้ค้าปลีก: นี่ไม่ใช่เครื่องมือทดสอบ แต่สิ่งสำคัญคือต้องทำงานบนอุปกรณ์ที่ถูกต้อง

เอลกับเครื่องมือ

ภาพหน้าจอของสวีเดน

(สำหรับฉัน) สิ่งนี้ทำให้มีความสามารถในการมองเห็นในการ “พูด” ในการโต้ตอบกับลูกค้าที่คุณให้ความเคารพเพียงเล็กน้อย”

อุปกรณ์ตอบสนอง

อุปกรณ์ที่คล้ายกับไซต์ Am I Responsive?

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

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

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

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

"(แอนดรอยด์สวยกว่า)

ฉันลองใช้ Firefox บนไซต์นี้และสะดุดเล็กน้อย

โปรดทราบว่าในภาพหน้าจอระหว่างส่วนหัวสีเขียวและพื้นที่เนื้อหาที่มีพื้นหลังสีขาว มีเพียงเฉดสีเข้มเท่านั้นที่สามารถแสดงแถบเลื่อนรูปภาพได้

responsive.is

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

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

แท็บเล็ต (แนวนอน);แท็บเล็ต (การวางแนวหนังสือ); สมาร์ทโฟน (แนวนอน) และสมาร์ทโฟน (แนวตั้ง) ไม่ได้กำหนดขนาดเป็นพิกเซลแบบสอบถามหน้าจอ

เป็นอีกครั้งที่มีอำนาจและตัวเลือกมากมายในการทำให้ Screenqueries แตกต่างจากไซต์อื่นๆ

Screenfly ปรับปรุงการใช้งานจริงๆ

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

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

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

ฉันอ้างอิงจากเว็บไซต์ของฉัน: “Screenfly อาจใช้พร็อกซีเซิร์ฟเวอร์เพื่อเลียนแบบอุปกรณ์เมื่อคุณดูเว็บไซต์ของคุณ

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