เครื่องมือสำหรับทดสอบรูปแบบที่ปรับเปลี่ยนได้ วิธีทดสอบการออกแบบที่ตอบสนองได้ฟรี โปรแกรมจำลองมือถือจาก Google DevTools

งานที่โดดเด่นที่สุดอย่างหนึ่งที่แผนก QA ของ EastBanc Technologies เคยเผชิญคือการสร้างระบบทดสอบอัตโนมัติสำหรับเว็บไซต์ www.washingtonpost.com นี่คือหนังสือพิมพ์อิเล็กทรอนิกส์ที่ใช้เป็นพอร์ทัลข้อมูลและข่าวสาร

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

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

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

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


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

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

สีฟ้า - ทดสอบโดย Galen เต็มไปด้วยสีเขียว - การทดสอบภาพหน้าจอ:

อย่างระมัดระวัง! ภาพใหญ่

ข้อความที่ซ่อนอยู่



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

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

บล็อก MostRead การทดสอบภาพหน้าจอ:


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

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

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


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

รหัสทดสอบกาเลน

ของเรา ระบบอัตโนมัติใช้การทดสอบ: Java, Maven, TestNG, Selenium WebDriver, Selenium Grid, Galen Framework

ชุดยูทิลิตี้ ImageMagick ข้ามแพลตฟอร์มช่วยเราในการสร้างการทดสอบตามภาพหน้าจอ

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

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

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

การทดสอบด้วย Galen Framework


Galen Framework มีข้อได้เปรียบที่ไม่อาจปฏิเสธได้หลายประการ: เป็นเครื่องมือที่ยืดหยุ่นและใช้งานง่ายที่มีความสามารถมากมายสำหรับการทดสอบการออกแบบที่ตอบสนอง นอกจากนี้ยังได้รับการบันทึกไว้อย่างดีและกำลังได้รับการพัฒนาอย่างต่อเนื่อง ในขณะนี้.

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

แท็กในไฟล์ spec สามารถตั้งค่าได้ดังนี้:






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




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




Galen Framework ยอมรับพารามิเตอร์ต่อไปนี้เป็นอินพุต:

  • เบราว์เซอร์ที่จะมีการตรวจสอบ
  • ความละเอียดที่จะทำการทดสอบ
  • URL ของหน้าที่ทดสอบ
  • ไฟล์ Javascript ที่จำเป็นต้อง (ถ้าจำเป็น) ที่จะนำไปใช้กับหน้าที่เปิดใช้งานก่อนที่จะเริ่มตรวจสอบกับไฟล์ .spec (เช่น หากคุณต้องการตรวจสอบการแสดงหน้าสำหรับผู้ใช้ที่เข้าสู่ระบบบนเว็บไซต์)
  • ชื่อของไฟล์ .spec ที่จะเปิดใช้งาน
  • แท็กที่ต้องใช้กับการตรวจสอบไฟล์ .spec (เช่น เดสก์ท็อป ทั้งหมด หากเรากำลังทดสอบเลย์เอาต์สำหรับเดสก์ท็อป)


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

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

การเลือกหน้าที่จะทดสอบจากชุดย่อยของหน้าประเภทเดียวกัน


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

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

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




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

ฉันควรทำการทดสอบด้วยความละเอียดเท่าใด


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

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

จะทดสอบเลย์เอาท์ที่ความละเอียดทั้งหมดได้อย่างไร?

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

เดสก์ท็อป: สูงสุด 1920px, ขั้นต่ำ 1018px;
แล็ปท็อป: สูงสุด 1,017px, ต่ำสุด 769px;
แท็บเล็ต: สูงสุด 768px, ขั้นต่ำ 481px;
มือถือ: สูงสุด 480px, ต่ำสุด 361px;
SMALL_MOBILE: สูงสุด 360px, ต่ำสุด 280px

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

ด้านล่างนี้เป็นโค้ดสำหรับรันการทดสอบ Galen สำหรับความละเอียดเดสก์ท็อป:

ข้อความที่ซ่อนอยู่



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

การป้องกันมิติ getRandomResolution(Dimension d) ( return getRandomDimensionBetween(d, d); ) private Dimension getRandomDimensionBetween(Dimension d1, Dimension d2) ( double k = Math.random(); int width = (int ) (k * (Math.abs (d1.getWidth() - d2.getWidth()) + 1 ) + Math.min(d1.getWidth(), d2.getWidth())); int height = (int ) (k * (Math.abs(d1 ) .getHeight() - d2.getHeight()) + 1 ) + Math.min(d1.getHeight(), d2.getHeight()));



และอันที่จริงช่วงความละเอียดถูกกำหนดไว้ดังนี้:

มิติสุดท้ายคงที่สาธารณะ DESKTOP = (มิติใหม่ (1920 , 1080 ), มิติใหม่ (1018 , 1080 ));



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

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

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

การทดสอบโครงร่างหน้าสูตรจะทำงานสำหรับช่วงความละเอียด (ความกว้างของวิวพอร์ต) ตั้งแต่ 768px ถึง 1017px ยกตัวอย่างหน้าเว็บ: www.washingtonpost.com/pb/recipes/maple-banana-frozen-yogurt/14143/

การทดสอบที่จุดขอบเขตของเค้าโครงแล็ปท็อป (1017px และ 768px) ไม่ก่อให้เกิดข้อผิดพลาด

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

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

อย่างระมัดระวัง! ภาพใหญ่

ข้อความที่ซ่อนอยู่



เค้าโครงใช้งานไม่ได้:

อย่างระมัดระวัง! ภาพใหญ่

ข้อความที่ซ่อนอยู่



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


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

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

ตัวอย่างเช่น:

นี่คือลักษณะของบล็อก MostRead: หน้าแรก washingtonpost.com (ซ้าย) และรุ่นที่เราจะเปรียบเทียบภาพหน้าจอของบล็อกนี้ (ขวา):



รหัสทดสอบมีลักษณะดังนี้:

@Test (groups = ( "ScreenshotBased" )) @WebTest ("ตรวจสอบว่าบล็อก "โพสต์ส่วนใหญ่" แสดงอย่างถูกต้อง") โมฆะสาธารณะ testMakeupForPostMost() ( HomePage page = new HomePage().open(); page.preparePostMostForScreenshot() ; ภาพหน้าจอ Helper.shootAndVerify(หน้า, page.thePostMost, "_thePostMost" );



โครงสร้างไดเร็กทอรีต่อไปนี้ใช้เพื่อจัดเก็บภาพหน้าจอ: /models/HomePage/firefox/HomePage_thePostMost.png

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

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

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

ปรากฎว่าการถ่ายภาพสแน็ปช็อตของบล็อกที่ต้องการอาจขึ้นอยู่กับหลายปัจจัย เช่น:

  • เวอร์ชันของระบบปฏิบัติการ
  • ธีมระบบปฏิบัติการ
  • เบราว์เซอร์และเวอร์ชันของมัน
  • ตัวเลือกการปรับแบบอักษรให้เรียบและการเร่งความเร็วด้วยฮาร์ดแวร์ที่หลากหลาย


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

ปัญหาที่สองที่เราพบคือการแสดงแบบอักษรที่แตกต่างกันในเบราว์เซอร์เนื่องจากการตั้งค่าการป้องกันนามแฝง เราพยายามแก้ไขปัญหาด้วยการติดตั้ง การตั้งค่าต่างๆเบราว์เซอร์ เช่น:

layer.acceleration.disabled
gfx.font_rendering.cleartype_params.rendering_mode
gfx.direct2d.disabled

แต่น่าเสียดายที่สิ่งนี้ไม่ได้ช่วย

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

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

วิธีแก้ไขคือการทำซ้ำการตั้งค่าทั้งหมดของเบราว์เซอร์ต่างๆ สำหรับทุกสิ่ง เครื่องเสมือนซึ่งดำเนินการทดสอบ และทำการตั้งค่าระบบปฏิบัติการซ้ำกัน

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

ลิงก์ต่อไปนี้มีอยู่ในรายงาน:

รูปภาพ-รุ่น


ภาพหน้าจอของเครื่องที่กำลังทดสอบ:


ผลการเปรียบเทียบสองภาพนี้:


CommandException บอกเราว่าภาพที่เปรียบเทียบแตกต่างกัน 251px:



นอกจากนี้ยังมีสถานการณ์ที่ขนาดภาพหน้าจอไม่ตรงกัน ในกรณีนี้ เราจะได้รับรายงานดังต่อไปนี้:




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

ด้านเทคนิค


ดังที่ได้กล่าวไว้ข้างต้น Technology Stack ถูกใช้เพื่อเขียนและรันการทดสอบ: Java, Maven, TestNG, Selenium, Galen Framework นอกจากนี้ผลการทดสอบจะถูกส่งไปยังกราไฟท์ การทดสอบดำเนินการโดยตรงโดยใช้ Jenkins CIS เราจะไม่ลงรายละเอียดว่าทำไมจึงเลือกชุดนี้โดยเฉพาะ ให้เราอธิบายสั้น ๆ ว่าทั้งหมดนี้เชื่อมโยงถึงกันอย่างไร

ปัจจุบัน Selenium Grid ใช้งานภายในเครื่องสี่เครื่อง เครื่องเสมือนด้วย Windows 7 ที่โหนดกริดกำลังทำงาน และบนเครื่อง Linux ที่ฮับกำลังทำงานอยู่ แต่ละโหนดมีอินสแตนซ์เบราว์เซอร์ Firefox และ Chrome 3 รายการ นอกจากนี้ ยังมีการนำ Jenkins และ Graphite มาใช้งานบนเครื่อง Linux อีกด้วย การทดสอบของ Galen ดำเนินการในการทดสอบทั่วไปด้วยการผสานรวมกับ TestNG เพื่อจุดประสงค์นี้ มีการเขียนคลาสที่เกี่ยวข้องซึ่งอนุญาตให้คุณใช้ jav Galen API เมื่อใช้การโต้ตอบของ TestNG กับ Galen เราพบปัญหาบางอย่างที่ได้รับการแก้ไขทันทีด้วยการโต้ตอบกับนักพัฒนา Galen นักพัฒนา Galena เองก็ยินดีที่จะร่วมมือและเผยแพร่การอัปเดตสำหรับเครื่องมือนี้เป็นประจำซึ่งจะขยายขีดความสามารถและทำให้สะดวกยิ่งขึ้น ตัวเขาเองวางแผนที่จะเขียนเอกสารสำหรับการรวม Galen เข้ากับ TestNG

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

ข้อสรุปของเรา


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

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

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

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

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

ไปกันเลย

5 บริการที่คุณสามารถตรวจสอบเว็บไซต์ของคุณเพื่อการปรับตัว www.responsivedesigntest.net

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

mattkersley.com

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

screenqueri.es

บริการที่ยอดเยี่ยมมากที่จะตรวจสอบเว็บไซต์ใด ๆ ฉันชอบการออกแบบและฟังก์ชันการทำงานมาก

quirktools.com

บริการที่สวยงามและใช้งานได้ดีมาก คุณสามารถตรวจสอบได้ว่าไซต์จะดูเป็นอย่างไรบนทีวี :-)

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

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

1. เค้าโครงเว็บไซต์แบบปรับเปลี่ยนได้ - คืออะไร

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

ความแตกต่างระหว่างเวอร์ชันมือถือของไซต์และเวอร์ชันที่ปรับเปลี่ยนได้

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

2. การเพิ่มประสิทธิภาพ SEOและรูปแบบที่ปรับเปลี่ยนได้

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

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

3. วิธีตรวจสอบการตอบสนองของเว็บไซต์

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

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

คุณสามารถปรับขนาดหน้าต่างเบราว์เซอร์ด้วยตนเองตามความกว้างและดูผลลัพธ์ได้ Firefox หรือ Google Chrome มีการออกแบบเบราว์เซอร์ที่ตอบสนองโดยการกด Ctrl+Shift+M

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

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

หลังจากตรวจสอบแล้ว มีสองทางเลือก ไซต์ได้รับการปรับให้เหมาะสมหรือไม่:

ตัวอย่างเช่น การทดสอบการตอบสนองของ Google:

ตรวจสอบความสามารถในการปรับตัวใน Yandex:

4. วิธีสร้างเค้าโครงเว็บไซต์แบบตอบสนอง

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

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

ไวยากรณ์ CSS @Media

@media device_type และ|ไม่|เท่านั้น (media_features) ( ... คำอธิบายของสไตล์... )

ตัวอย่างเช่น เรามาเขียนเงื่อนไขภายใต้สไตล์ที่จะใช้กับอุปกรณ์ที่มีความกว้างหน้าจอน้อยกว่า 800px

@media screen และ (max-width : 800px ) ( ... styles ... ) หมายเหตุ

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

@media only screen และ (max-width : 1280px ) ( ... ) @media only screen และ (max-width : 1024px ) ( ... ) @media only screen และ (max-width : 800px ) ( ... )

ในแท็กส่วนหัว คุณต้องเขียนบรรทัดต่อไปนี้:

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

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

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

.hphns ( overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; ยัติภังค์ : auto ; ) 5.2. เมนูที่ปรับเปลี่ยนได้เว็บไซต์

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

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

สถานการณ์เมื่อเรามีเมนูและเนื้อหาหลัก (ฉันไม่ได้วาดส่วนหัวและส่วนท้าย):

รหัส HTML สำหรับโครงสร้างดังกล่าวอาจเป็นดังนี้:

body ( ขอบซ้าย : 10% ; ความกว้าง : 70% ; เส้นขอบ : 1px solid #eee ; ) #menu ( ความกว้าง : 20% ; ความสูง : auto ; float : left ; ) #content ( ความกว้าง : 70% ; ความสูง : auto ; float : left ; border-left : 1px solid #000 ; ชื่อหน้า

เนื้อหาของหน้า

เนื้อหาของหน้า

เนื้อหาของหน้า

เนื้อหาของหน้า

แปลงหน้าเป็น

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

เรามาแก้ไขตัวอย่างของเราดังต่อไปนี้ หากความละเอียดหน้าจอน้อยกว่า 800 พิกเซล เมนูจะหายไปและปุ่มเมนูเปิดพิเศษจะปรากฏขึ้น

นี่คือโค้ด html สำหรับเลย์เอาต์แบบปรับได้พร้อมความคิดเห็น:

body ( ขอบซ้าย : 10% ; ความกว้าง : 70% ; เส้นขอบ : 1px solid #eee ; ) #menu ( ความกว้าง : 20% ; ความสูง : auto ; float : left ; display : block ; ) #content ( width : 70% ; ความสูง : อัตโนมัติ ; ลอย : ซ้าย ; ขอบซ้าย : 1px solid #000 ; การขยาย : 1% ) #mob_menu ( จอแสดงผล : ไม่มี ; ) @media เท่านั้น หน้าจอ และ (ความกว้างสูงสุด : 800px ) ( #menu ( จอแสดงผล : ไม่มี ) ; ) #mob_menu ( display : block ; ) #content ( clear : ทั้งสอง ; ) ) ฟังก์ชั่น showmobmenu() ( if ( == "block ") ( document.getElementById("menu").style.display = "none " ) อื่น ( document.getElementById("menu").style.display = "block " ) ) ขยายเมนู ↓เมนู ชื่อหน้า

เนื้อหาของหน้า

เนื้อหาของหน้า

เนื้อหาของหน้า

เนื้อหาของหน้า

ลองลดความกว้างของหน้าจอลงเหลือ 700 พิกเซล (ตัวอย่าง) นี่คือสิ่งที่ดูเหมือนบนหน้า

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

ตรวจสอบ

เว็บไซต์ที่ตอบสนองคืออะไร?

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

เว็บไซต์แบบตอบสนองและเวอร์ชันมือถือแตกต่างกันอย่างไร?

หากไซต์มีเวอร์ชันสำหรับมือถือจากนั้นเมื่อโหลดไซต์ดังกล่าวจาก โทรศัพท์มือถือคุณจะถูกเปลี่ยนเส้นทางไปยังที่อยู่อื่น: site.ru → m.site.ru เวอร์ชันมือถือเป็นไซต์แยกต่างหากซึ่งมีที่อยู่อื่น

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

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

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

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

ทำไมโทรศัพท์ถึงมีความกว้าง บริการนี้เล็กมากเหรอ?

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

ขนาดหน้าต่างเบราว์เซอร์ของฉันคือเท่าไร?

บนอุปกรณ์ที่มีจอแสดงผลแบบเรตินา ขนาดที่แสดงจะแตกต่างจากความละเอียดพิกเซลจริงที่ระบุไว้ในข้อมูลจำเพาะของอุปกรณ์ สมาร์ทโฟนจะแสดง 320x480 หรือ 480x800 พิกเซล, แท็บเล็ต - 1280x800

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

เหตุใดการตรวจสอบคุณภาพของเลย์เอาต์จึงสำคัญ

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

เครื่องมือตรวจสอบ

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

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

ข้าว. 1. ดีบักเกอร์ช่วยให้ค้นหาข้อผิดพลาดได้ง่ายขึ้น

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

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

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

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

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

เบราว์เซอร์อื่นๆ จะข้ามส่วนนี้ไป สามารถใช้วิธีนี้ได้หากคุณต้องการการสนับสนุน IE จริงๆ

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

วิธีตรวจสอบเค้าโครงแบบปรับได้

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

ข้าว. 2. การเปลี่ยนความกว้างของหน้าต่างเบราว์เซอร์เป็นวิธีที่ง่ายที่สุดในการทดสอบการตอบสนอง

ความเข้ากันได้ข้ามเบราว์เซอร์

คุณสามารถตรวจสอบรูปแบบเว็บไซต์ได้อย่างไร? จะต้องมีการตรวจสอบความเข้ากันได้ข้ามเบราว์เซอร์ คุณต้องเปิดไซต์ในเบราว์เซอร์ที่แตกต่างกันและดูว่าไซต์เหล่านั้นมีลักษณะอย่างไร คุณสามารถเปลี่ยนขนาดและขนาดแบบอักษรได้ คุณต้องแน่ใจว่าอย่างน้อยผู้ใช้ส่วนใหญ่จะสบายดี หากคุณตรวจสอบด้วยตนเอง คุณยังสามารถขอให้เพื่อนของคุณตรวจสอบเค้าโครงในเบราว์เซอร์ของพวกเขาได้หากเวอร์ชันของพวกเขาแตกต่างจากของคุณ เราสามารถให้คำแนะนำได้อีกข้อหนึ่ง - อย่าใช้คุณสมบัติเฉพาะเจาะจงมากเกินไปซึ่งได้รับการสนับสนุนในเบราว์เซอร์เดียวเท่านั้น และหากคุณใช้มันอยู่แล้ว ให้คิดหาทางเลือกอื่นสำหรับพวกมันในเบราว์เซอร์อื่น คุณสมบัติบางอย่างยังคงจำเป็นต้องใช้คำนำหน้าผู้ขาย เนื่องจากมาตรฐานเว็บมีการพัฒนาอย่างต่อเนื่อง และเบราว์เซอร์บางประเภทไม่สามารถรองรับทุกสิ่งได้ แต่ถ้าคุณตรวจสอบความเข้ากันได้ข้ามเบราว์เซอร์แล้ว ให้ทำอย่างน้อยกับเบราว์เซอร์ต่อไปนี้: Chrome, Mozilla, Opera, Safari, IE

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

การตรวจสอบความสอดคล้องกับเค้าโครง

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

ข้อกำหนดเพิ่มเติม

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

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