Дасан зохицох зохион байгуулалтыг турших хэрэгсэл. Хариуцлагатай дизайныг хэрхэн үнэ төлбөргүй турших вэ. Google DevTools-ийн гар утасны эмулятор

EastBanc Technologies QA хэлтсийн өмнө тулгарч байсан хамгийн гайхалтай ажлуудын нэг бол www.washingtonpost.com вэб сайтын автоматжуулсан туршилтын системийг бий болгох явдал юм. Энэ бол мэдээлэл, мэдээллийн портал хэлбэрээр хэрэгжсэн цахим сонин юм.

Туршилтын автоматжуулсан системийг бий болгох шаардлагатай болсон гол шалтгаан нь уг программыг шинэ CMS (PageBuilder гэгддэг) руу шилжүүлэхээр төлөвлөж байсан бөгөөд энэ нь өмнө нь сайтын янз бүрийн хэсэгт контент нийтлэхэд ашиглаж байсан хэд хэдэн CMS-ийг орлуулах ёстой байв. Энэ төрлийн шилжилтийн үед алдаа гаргахгүй байх нь маш чухал бөгөөд ингэснээр шинэ CMS-ээр дамжуулан янз бүрийн төрлийн хуудсан дээр нийтлэгдсэн контент тохиромжтой харагдаж байна.

Бид бүх хуудсыг туршилтандаа нийцэж байгаа эсэхийг шалгах даалгавартай тулгардаггүй. Бидний даалгавар бол PageBuilder-ийн алдааг олж илрүүлэх, шинэхэн жигнэсэн PageBuilder-ийн бүтээсэн хуудсуудын байршлын найдвартай байдлыг шалгах, Washington Post редакторуудын анхаарлыг тодорхой хуудсыг контентоор дүүргэхийн тулд хуудсыг харуулахад асуудал үүсгэж болзошгүйд хандуулах явдал юм. .
Туршилтын системийг бий болгох ажил идэвхтэй хөгжиж байгаа боловч бидний сонирхолтой гэж үзсэн зарим зүйлийг олон нийтэд танилцуулах боломжтой.

Үүнийг хийхийн өмнө төслийн нэг онцлог шинжийг тэмдэглэх нь зүйтэй: бидний бүх туршилт "гадаа" явагддаг. Тэдгээр. Бид бусад хэрэглэгчдийн нэгэн адил сайтын байлдааны хувилбарыг туршилтанд ашигладаг.

Интернэтийг судалж үзээд бид дараах арга, хэрэгслүүд дээр тогтсон. Хуудасны хүрээг туршихын тулд бид Galen фрэймворкийг ашигласан бөгөөд дараа нь testNG-тэй нэгтгэсэн.

Мэдээжийн хэрэг, хуудасны хүрээний хувьд Гален тестийг давсан нь зураглал хүчинтэй гэсэн үг биш юм. Блокуудын байршлаас гадна та блок доторх янз бүрийн элементүүдийн дэлгэцийг шалгах хэрэгтэй. Бид дэлгэцийн агшинг харьцуулах замаар блокуудын дотоод агуулгыг туршихаар шийдсэн.
Дэлгэцийн агшингийн туршилтууд нь янз бүрийн лого, товчлуурууд, тодорхой дэлгэцтэй зарим блокуудыг агуулдаг - Гален хүрч чадахгүй, функциональ тестээр шалгахад хэцүү/боломжгүй бүх зүйл.

Azure өнгө - Гален шалгасан, ногооноор дүүргэсэн - дэлгэцийн агшин тест:

Болгоомжтой! Том зураг

Нуугдсан текст

Galen болон Screenshot тестүүд нь зарим функциональ тестүүдийг амжилттай орлож, заримдаа тодорхой болж, заримдаа хурдтай, заримдаа хоёуланг нь олж авдаг. Гүйцэтгэлийн шалгуур, дэмжлэгийн хялбар байдал, тестийн хамрах хүрээний бүрэн байдал, тодорхой байдлын шалгуурт үндэслэн хуудас бүрийн төрөл бүрийн тестийн кейсийн хамтын хэлэлцүүлгээр бид тодорхой тохиолдлын туршилтын аргыг сонгодог.

Жишээ нь, бид эхлээд шалгахын тулд функциональ тестүүдийг бичсэн 2 блок байдаг: Хамгийн Уншсан болон Мэдээллийн Блок. Одоо бид эхнийх нь дэлгэцийн агшин, хоёр дахь нь Гален тестээр шалгана.

MostRead блок, дэлгэцийн агшингийн тест:


Функциональ тестийн тухайд: кодын мөрүүд мэдэгдэхүйц багасч, тестийн хамрах хүрээ нэмэгдэж, өөрчлөлт гарсан үед тест шинэчлэгддэг. Гадаад төрххуудсан дээрх энэ блок их цаг хугацаа шаардахгүй.

Энэ блокийг турших талаар дэлгэцийн зургийн аргын бүлэгт авч үзнэ.

WaPo мэдээллийн блок:


Гален нь тухайн блокийн текст болон холбоосуудын захидал харилцааг шалгахад хялбар байдаг: холбоосууд нь өөрөө байршуулагч дээр тодорхойлогддог бөгөөд текстийн захидал харилцааг дотоод гален шалгалтаар хийдэг. Функциональ тестийн тухайд тестийн хамрах хүрээний бүрэн байдал өөрчлөгдөөгүй боловч шалгалтыг нэг туршилтын хүрээнд хийдэг тул бид цагийг ихээхэн хэмнэдэг.

Гален тестийн код.

Манай автоматжуулсан системтуршилтын хэрэглээ: Java, Maven, TestNG, Selenium WebDriver, Selenium Grid, Galen Framework.

ImageMagick хэрэгслүүдийн хөндлөн платформ нь дэлгэцийн агшинд суурилсан тестийг бий болгоход бидэнд идэвхтэй тусалдаг.

Бид Java дээр тестийн кодыг PageObject загвар болон Yandex хүрээ - HTML элементүүдийг ашиглан бичдэг гэдгийг нэн даруй тэмдэглэхийг хүсч байна. Maven болон testNG нь тестийг ажиллуулахад ашиглагддаг.

Туршилт явуулах, туршилтын гүйлтийн түүхийг үзэх, өндөр мэргэшсэн мэргэжилтнүүдийг оролцуулалгүйгээр тайланг үзэхэд хялбар болгохын тулд бид хөгжүүлж байна. тусдаа програм- Хяналтын самбар.

Одоо бид туршилтын бүх үйл явцыг хэрхэн зөв зохион байгуулах судалгааны шатандаа байгаа бөгөөд бүх арга барилыг бүрэн эзэмшиж, судлаагүй байгааг онцлон тэмдэглэх нь зүйтэй.

Galen Framework нь эргэлзээгүй олон давуу талтай: энэ нь уян хатан, хэрэглэхэд хялбар хэрэгсэл юм. Нэмж дурдахад энэ нь маш сайн баримтжуулсан бөгөөд одоогоор идэвхтэй хөгжиж байна.

Galen Framework-ийг аль хэдийн нийтлэлүүдийн аль нэгэнд нарийвчлан тайлбарласан болно. Galen-тэй ажиллах зарчмыг товч тайлбарлахын тулд энэ нь иймэрхүү харагдаж байна: та тусгай, сайн баримтжуулсан, ойлгомжтой синтакс ашиглан хуудасны тодорхойлолтыг (special file гэж нэрлэдэг) бичдэг. Тодорхойлолтын файл нь хуудасны элементүүдийн харьцангуй байрлал, хэмжээ, догол мөр, үүрлэх болон хуудасны зохион байгуулалтад тохирох бусад параметр, нөхцөлүүдийг тодорхойлдог бөгөөд та элемент доторх текстийн нийцтэй байдлыг шалгаж болно. Мөн эдгээр бүх шалгалтыг бидний зааж өгсөн шошгооос хамааран хийх болно.

Spec файл дахь шошгыг дараах байдлаар тохируулж болно.






Galen бүх шалгалтыг хийж, дараа нь html файл хэлбэрээр харааны тайланг үүсгэдэг. Тайлан нь өгөгдсөн шалгалтанд ямар шалгалт амжилтгүй болсныг зааж өгөх бөгөөд бүтэлгүйтсэн шалгалт бүрийн хувьд та шалгагдсан хуудасны бүтэн дэлгэцийн агшинг харах боломжтой бөгөөд тодорхой шалгалтанд амжилтгүй болсон элементүүдийг тодруулна.
Жишээлбэл, зэргэлдээ элементүүдийн хоорондох зайг шалгах амжилтгүй туршилт нь тайланд иймэрхүү харагдах болно.




Та улаанаар тодруулсан чек дээр дарахад шалгаж буй бүх хуудасны дэлгэцийн агшинг дараах байдлаар тодруулсан элементүүдийг харуулна.




Galen Framework нь дараах параметрүүдийг оролт болгон хүлээн авдаг.

• шалгалт явагдах хөтөч
• туршилтыг явуулах тогтоол
• шалгасан хуудасны url
• .spec файлыг шалгаж эхлэхээс өмнө эхлүүлсэн хуудсан дээр (шаардлагатай бол) ашиглах шаардлагатай Javascript файл (жишээлбэл, сайтад нэвтэрсэн хэрэглэгчийн хуудасны дэлгэцийг шалгах шаардлагатай бол)
• эхлүүлэх гэж буй .spec файлын нэр
• .spec файлын шалгалтанд хэрэглэх шаардлагатай шошгууд (жишээ нь: ширээний компьютер, бүх, хэрэв бид ширээний зохион байгуулалтыг туршиж байгаа бол).

Таны харж байгаагаар Galen-д нийлүүлсэн параметрүүдийг өөрчилснөөр та манай сайтын хүрээг бараг бүрэн туршиж үзэх боломжтой.

Бид сайтын хүрээг турших хэрэгсэл сонгохоор шийдсэний дараа дараагийн ажил бол Galen тестээр хуудасны хамрах хүрээг дээд зэргээр хангах схемийг сонгох явдал байв.

Хэрэв тест нь ижил төстэй олон хуудсыг шалгах зорилготой бол бүдүүвчийг туршихын тулд аль хуудсыг сонгох вэ?

Бид туршилтын иж бүрдлийг ажиллуулах бүртээ нэг их төвөг учруулахгүйгээр дэд багцаас санамсаргүй хуудас сонгохоор шийдсэн (жишээ нь жорын хуудсын дэд багцыг туршихын тулд бид жоруудын аль нэгийг сонгож, түүний url-г бүх бүдүүвчийн тестүүдэд дамжуулсан). Даалгаврын бүх хуудсыг шалгаж үзэх нь үнэ цэнэтэй зүйл биш тул санамсаргүй хуудас сонгох сонголт хамгийн оновчтой мэт санагдсан. Шалгагдаж буй хуудсуудын дэд багцын санамсаргүй хуудасны URL-г манай вэбсайтын автоматжуулсан систем дэх бүх тестийн нийтлэг аргыг ашиглан Galen руу дамжуулдаг (байршлын тестээс бусад тохиолдолд функциональ болон дэлгэцийн агшингийн тестүүд байдаг).

Жишээлбэл, ижил төрлийн хуудсуудыг харуулах 2 сонголт байдаг - хоолны жорын хуудас, тэдгээрийн аль нэгэнд нь зохион байгуулалт нь алдаатай байна.




Жишээнээс харахад хуудасны баруун баганад байрлах "Хамгийн их уншсан" блок баруун талд биш харин үндсэн хэсэгт байрлаж байгааг харж болно. Ийм асуудал байхгүй эсэхийг шалгахын тулд та шалгах хэрэгтэй том тоохуудсууд болон олон хүчин зүйлийг харгалзан үздэг.

Нэгдүгээрт, хамгийн түгээмэл төхөөрөмжүүдийг сонгож, тэдгээрийн нарийвчлалыг ашиглан туршилт хийх санаа гарч ирэв. Гэсэн хэдий ч манай гаригийг түргэвчилсэн дайчлах хандлага нь тодорхой харагдаж байгаа нь энэ салбарт ямар ч маргаангүй удирдагчдыг тодорхойлох (мөн үүнээс ч илүүтэйгээр урьдчилан таамаглах) боломжийг бидэнд олгодоггүй. Танд вэб програмуудыг үзэх боломжийг олгодог маш олон төхөөрөмж байдаг бөгөөд эдгээр төхөөрөмжүүдийн зөвшөөрлийг нэгтгэх нь өнөөдөр огт моод биш юм. Гэнэт ингэж бодов дасан зохицох загварТийм ч учраас энэ нь дасан зохицох чадвартай тул үүнийг ямар ч хүчинтэй нарийвчлалтайгаар зөв харуулж, бидний оюун ухааныг аварч, энэ чиглэлээр цаашдын судалгааг зогсоосон. Шийдвэр гарлаа: бид бүх хүчин төгөлдөр тогтоол дээр байршлыг туршиж үздэг.

Хамгийн бага Viewport өргөн = 241 px (хөтөч багасдаггүй) -ээс хамгийн их Viewport өргөн = 1920px (дээд хязгаар нь хүсэл зоригийн энгийн хүч) хүртэлх бүх зөвшөөрлүүдэд хүчинтэй зөвшөөрлийг олгосон. Бидэнд автоматжуулсан туршилтын зорилгоор харах цонхны өндрийг тодорхойлох параметр байсан хуудас хараахан гараагүй байгаа тул өндрийг хараахан анхаарч үзэхгүй байна.

Бүх нягтрал дээр зохион байгуулалтыг хэрхэн шалгах вэ?

Эхлэхийн тулд хүчинтэй тогтоолуудын бүх хүрээг өөр өөр схемийн мужид хуваасан. Байршил нь өөрөө "резин" боловч блокуудын өөр өөр зохион байгуулалт нь ялгах боломжийг олгодог. Бүдүүвчний хил хязгаарыг тодорхойлох нь тийм ч хэцүү биш - бид хөтчийн буланг татаж, хуудасны блокууд ямар хилийн цэг өөрчлөгдөж байгааг харна уу: тэдгээрийн харьцангуй байрлал, тоо ба / эсвэл зан төлөв. Энгийн болгохын тулд бид зөвхөн харах цонхны өргөнийг харгалзан үздэг. Үр дүн нь дараах хүснэгт юм.

Ширээний компьютер: хамгийн ихдээ 1920px, хамгийн багадаа 1018px;
ЗӨӨВРИЙН компьютер: хамгийн ихдээ 1017px, хамгийн багадаа 769px;
TABLET: хамгийн ихдээ 768px, хамгийн багадаа 481px;
MOBILE: хамгийн ихдээ 480px, хамгийн багадаа 361px;
SMALL_MOBILE: хамгийн ихдээ 360px, хамгийн багадаа 280px.

Дашрамд дурдахад, ийм нягтралтай төхөөрөмж дээр Вашингтон Постыг үзэж буй хэрэглэгчдийн тоо маш бага байгаа тул бид ЖИЖИГИЙН_MOBILE загварыг туршиж үзэхгүй байхаар шийдсэн (таамгийн дүгнэлт бөгөөд цаашид туршилтын явцад үүнийг нэмэхэд асуудал гарахгүй) . Туршилтад өөр өөр байршилтай 4 муж үлдсэн байна.

Доорх нь ширээний нягтралд зориулсан Galen тестийг ажиллуулах код юм.

Нуугдсан текст

Туршилт бүрийг ажиллуулах үед Galen-д өгөгдсөн байршлын мужаас санамсаргүй нарийвчлалыг өгдөг (getRandomResolution(DESKTOP)):

Үнэн хэрэгтээ, нарийвчлалын хүрээг дараах байдлаар тохируулсан болно.

Хүчинтэй мужаас нарийвчлалыг санамсаргүй байдлаар, ижил төстэй хуудасны дэд багцаас туршилтын хуудсыг сонгох замаар тест хийх нь магадлалын процесс болж хувирдаг. Бид үүнийг хэдий чинээ олон удаа ажиллуулна төдий чинээ олон янзын алдаануудыг олох болно. Ганц амжилттай тестийн хувьд бид зөвхөн энэ нарийвчлалтай энэ хуудсыг хүчинтэй гэж хэлж чадна. Гэхдээ 500 амжилттай гүйлтийн дараа зохион байгуулалт нь ихэвчлэн амьдрах чадвартай гэж хэлж болно. "500 амжилттай гүйлт" нь таамагласан тооцоо бөгөөд энд та агуулга, түүнтэй адилтгах хуудасны тоог харах хэрэгтэй гэж шууд хэлье.

Санамсаргүй нарийвчлалтайгаар ажиллуулах нь маш хурдан үр дүнгээ өгч, туршилтыг тогтмол нягтаршилтайгаар явуулахад бидний анзаарахгүй байх магадлалтай нэг сонирхолтой алдааг нэн даруй илрүүлсэн.

Энэхүү арга нь жорны хуудсыг турших жишээг ашиглан бидэнд хэрхэн тусалж байгааг харцгаая.

Жорны хуудасны утас фрэймийн туршилт нь 768px-ээс 1017px хүртэлх нарийвчлалын мужид (Харах талбайн өргөн) ажилладаг. Жишээ нь: www.washingtonpost.com/pb/recipes/maple-banana-frozen-yogurt/14143/ хуудсыг ав.

Зөөврийн компьютерын зохион байгуулалтын (1017px ба 768px) хилийн цэгүүд дээрх туршилт нь алдаа гаргаагүй.

Гэсэн хэдий ч бид туршилтыг санамсаргүй нарийвчлалтайгаар ажиллуулж эхэлсний дараа ойролцоогоор тал хувь нь туршилтууд эвдэрч, дэлгэцийн агшинд баруун баганын блокууд үндсэн агуулгын доор мөлхөж байгааг харуулсан.

Зөв харах:

Болгоомжтой! Том зураг

Нуугдсан текст

Зохион байгуулалт эвдэрсэн:

Болгоомжтой! Том зураг

Нуугдсан текст

Нийтлэлээс санаа авч бид дэлгэцийн агшинд суурилсан тестийн аргыг ашиглахаар шийдсэн. Дашрамд хэлэхэд, зохион байгуулалтыг туршихын тулд бид эхэндээ энэ аргад тулгуурласан. Тэдгээр. Энэ санаа нь хуудасны бүрэн хэмжээний дэлгэцийн агшинг урьдчилан бэлтгэсэн загвартай харьцуулж, өөрчлөгдөж болох бүх элементүүдийг бүдүүвчээр солих явдал байв (урьдчилан сонгосон дурын зургийг stub болгон авдаг). Эдгээр элементүүдэд зураг, флаш сурталчилгаа, текст багтсан. Хуудсууд нь динамикаар ачаалагдсан олон блокуудыг агуулж байсны улмаас энэ санаа бүтэлгүйтсэн бөгөөд үүний үр дүнд авсан дэлгэцийн агшингийн физик хэмжээ, блокуудын байршил туршилтын гүйлтээс гүйлт болж өөрчлөгдсөн. Нэмж дурдахад хэсэг хугацаанд Chrome бүрэн хэмжээний дэлгэцийн агшин авах чадвараа алдсан бөгөөд энэ нь бас олон асуудал үүсгэсэн.

Дэлгэцийн агшинд суурилсан туршилтууд нь одоо дэлгэцэнд чухал ач холбогдолтой болон/эсвэл функциональ болон функциональ тестээр шалгахад хэцүү эсвэл боломжгүй байгаа тухайн хуудасны бие даасан элементүүд болон блокуудыг шалгадаг.

Жишээлбэл:

MostRead блок дараах байдалтай байна. нүүр хуудас washingtonpost.com (зүүн талд) болон энэ блокийн дэлгэцийн агшинг харьцуулах загвар (баруун талд):



Туршилтын код дараах байдалтай байна.

Дэлгэцийн агшинг хадгалахад дараах лавлах бүтцийг ашигладаг: /models/HomePage/firefox/HomePage_thePostMost.png

Эндээс харахад, төлөө өөр өөр хөтөчШаардлагатай блокийн өөрийн загварын дэлгэцийн агшинг аваарай.

shootAndVerify() арга нь дамжуулсан хуудасны ангилал болон туршилтыг явуулж буй хөтчийн нэр дээр үндэслэн загварт хүрэх замыг олдог.

Урагшаа харахад энэ нь нэлээд сайн ажиллаж байна гэж хэлье, дараа нь бүх зүйл бүрэн дибаг хийгдээгүй байна гэсэн анхааруулгатай үйл явцын зарим нарийн ширийн зүйлийг тайлбарлах болно.

Эндээс харахад шаардлагатай блокийн агшин зуурын зураг нь олон хүчин зүйлээс шалтгаална, тухайлбал:

• үйлдлийн системийн хувилбар
• үйлдлийн системийн сэдэв
• хөтөч ба түүний хувилбар
• Төрөл бүрийн фонтыг жигд болгох сонголтууд болон техник хангамжийн хурдатгал.

Эхний асуудал бол авсан дэлгэцийн агшингийн хэмжээ нь үйлдлийн систем болон хөтчийн тохиргооноос хамаарч өөр өөр байсан явдал байв. Блокны хэмжээ, тиймээс дэлгэцийн агшинг ижил болгохын тулд та тогтмол хэмжээтэй хөтөчийг ажиллуулах хэрэгтэй. Та хөтөчийн цонхны хэмжээг тохирох вэб драйверын аргыг ашиглан өөрчилж болно: driver.manage().window().setSize(requiredSize). Гэхдээ ийм байдлаар бид цонхны хэмжээг тохируулахаас гадна бидэнд хэрэгтэй харагдах талбайн хэмжээ - харах цонхны хэмжээг биш юм. Дашрамд хэлэхэд босоо гүйлгэх самбар нь харах цонхны хэмжээд нөлөөлдөг бөгөөд зузаан нь мөн үүнээс хамаарна. цонхны сэдэв, тиймээс та үүнийг анхаарч үзэх хэрэгтэй. Асуудлын шийдэл нь харах цонхны хэмжээг тохируулах тохируулгын арга байсан өгөгдсөн хэмжээсүүд. Эхний туршилтыг явуулсны дараа цонхны хэмжээ болон харах цонхны өргөн хоорондын зөрүүг тусгай параметрт хадгалж, дараагийн гүйлтүүдэд дахин ашигладаг.

Бидэнд тулгарсан хоёр дахь асуудал бол antialiasing тохиргооноос болж хөтчүүдэд фонтыг өөр өөр харуулах явдал байв. Бид суулгах замаар асуудлыг шийдэхийг оролдсон янз бүрийн тохиргоохөтөч гэх мэт:

давхаргууд.хурдатгал.идэвхгүй
gfx.font_rendering.cleartype_params.rendering_mode
gfx.direct2d.идэвхгүй

Гэвч харамсалтай нь энэ нь тус болсонгүй.

Нэмж дурдахад, дэлгэцийн агшинг харьцуулахын тулд ImageMagick хэрэгсэл нь fuzz гэх мэт параметрийг ашигладаг бөгөөд энэ нь дэлгэцийн агшингийн хоорондох хамгийн их зөрүүг тогтоодог.

Шийдэх гэж оролдсон энэ асуудал, энэ параметрийг туршиж байна. Маш олон тексттэй байсан тул өөр өөр пикселийн тоо маш их байсан тул жижиг бүдэг коэффициент нь асуудлыг шийдэж чадаагүй бөгөөд том коэффициент нь блокуудад зарим элемент байхгүй байх шалтгаан болсон. туршилтанд нөлөөлж, алдаа гаргахад хүргэсэн.

Үүний шийдэл нь янз бүрийн хөтөчийн бүх тохиргоог бүх зүйлд хуулбарлах явдал байв виртуал машинууд, туршилтыг явуулсан бөгөөд үйлдлийн системийн тохиргоог өөрсдөө давхардсан.

Жишээлбэл, зургуудын аль нэг нь ачаалагдаагүй нийгмийн товчлууруудын блокийг шалгадаг тест.

Тайлангаас дараах холбоосууд байна.

зураг загвар


Туршиж буй нэгжийн дэлгэцийн агшин:


Эдгээр хоёр зургийг харьцуулсны үр дүнд:


CommandException нь харьцуулсан зургууд 251px-ээр ялгаатай болохыг бидэнд хэлдэг:



Дэлгэцийн агшингийн хэмжээ таарахгүй байх тохиолдол бас байдаг. Энэ тохиолдолд бид дараах тайланг хүлээн авна.




Заримдаа үл мэдэгдэх шалтгааны улмаас шалгаж буй блок доторх элементүүд бага зэрэг буруу байрлалтай байдаг. Ийм тохиолдлын хувьд бид нэг загвартай биш, харин масктай тохирох загваруудын бүлэгтэй харьцуулдаг, i.e. Бид HomePage_thePostMost.png, HomePage_thePostMost (1).png гэсэн дараах нэртэй thePostMost блокийн хэд хэдэн загвартай байж болох ба бид бүх загварыг хүчинтэй гэж үздэг. Аз болоход, ийм сонголтуудын тоо хязгаарлагдмал, ихэвчлэн 2-оос ихгүй байдаг.

Дээр дурдсанчлан технологийн стекийг тест бичих, ажиллуулахад ашигладаг: Java, Maven, TestNG, Selenium, Galen Framework. Үүнээс гадна туршилтын үр дүнг бал чулуу руу илгээдэг. Туршилтыг Jenkins CIS ашиглан шууд эхлүүлдэг. Яагаад энэ багцыг сонгосон талаар бид дэлгэрэнгүй ярихгүй. Энэ бүхэн хоорондоо хэрхэн холбоотой болохыг товч тайлбарлая.

Selenium Grid нь одоогоор орон нутгийн хэмжээнд дөрөв дээр байрладаг виртуал машинуудсүлжээний зангилаа ажиллаж байгаа Windows 7 болон төв ажиллаж байгаа Линукс машин дээр. Зангилаа бүр 3 firefox болон chrome хөтөчтэй. Нэмж дурдахад Женкинс болон бал чулууг Линукс машин дээр суулгасан. Galen-ийн туршилтууд нь TestNG-тэй нэгдсэний ачаар ерөнхий туршилтаар явагддаг. Энэ зорилгоор jav Galen API-г ашиглах боломжийг олгодог харгалзах анги бичсэн. Galen-тай TestNG-ийн харилцан үйлчлэлийг хэрэгжүүлэх явцад бид Galen хөгжүүлэгчтэй харьцсаны үр дүнд нэн даруй шийдэгдсэн зарим асуудалтай тулгарсан. Галена хөгжүүлэгч өөрөө хамтран ажиллахад бэлэн бөгөөд энэ хэрэгслийн чадавхийг өргөжүүлж, илүү тохиромжтой болгох шинэчлэлтүүдийг тогтмол гаргадаг. Тэр өөрөө Галеныг TestNG-тэй нэгтгэх баримт бичгийг бичихээр төлөвлөж байна.

Функциональ, галеник болон дэлгэцийн агшинд суурилсан тестүүдийг Туршилтын тэмдэглэгээнд хуваарилагдсан харгалзах бүлгийн параметрийг ашиглан тусгаарладаг бөгөөд тэдгээрийг тусад нь ажиллуулах боломжтой.

Дэлгэцийн агшинг харьцуулах, Galen Framework ашиглан тест хийх хоёр арга нь хуудасны байршлыг шалгахад тохиромжтой. Тэд бие биенээ амжилттай нөхдөг. Дэлгэцийн агшинг харьцуулах арга нь заримын дэлгэцийг шалгах шаардлагатай үед илүү тохиромжтой бие даасан элементэсвэл блок, жишээ нь хуваалцах самбар нийгмийн сүлжээндэсвэл толгой хэсэгт байрлах үндсэн цэс. Блок нь дотроо олон дүрсийг агуулж болох бөгөөд тэдгээр нь эргээд бусад дүрс, элементүүдийн дотор байрлаж, эсвэл тэдгээртэй харьцангуй байрлалтай байж болно.

Galen-ийг ашигласнаар эдгээр бүх жижиг мөчүүдийг дүрслэх нь маш их хөдөлмөр шаарддаг боловч хөтөч бүрийн нэг дэлгэцийн агшин нь энэ асуудлыг шийдэж, дэлгэцийн агшинг харьцуулах нь тодорхой зүйлийг тайлбарлахдаа ямар нэг зүйлийг алдах магадлалыг арилгадаг. Гален нь эргээд блокуудыг харьцангуй байрлуулж, тэдгээрийн доторх гарчиг, тогтмол текстийг шалгах ажлыг маш сайн гүйцэтгэдэг. Түүнд байгаа сайн ашиглахХэрэв та функциональ логикоор ачаалагдаагүй ижил төрлийн загвар хуудаснууд дээр байршлыг турших шаардлагатай үед, жишээлбэл, зарим мэдээллийн портал, манай тохиолдол шиг, сайтын бараг бүх хуудсанд зөвшөөрөлгүйгээр эсвэл хэрэглэгчийн бусад үйлдэлгүйгээр хандах боломжтой. Нэмж дурдахад, Гален нь дасан зохицох програмын зохион байгуулалтын нөхцөлд хөтчүүд хоорондын туршилтын асуудлыг шийдвэрлэхэд сайн байдаг.

Сайн байна уу, эрхэм блог уншигчид. Дасан зохицох загвар нь Оросын интернетэд улам бүр түгээмэл болж байгаа нь гайхах зүйл биш юм. Мэдээжийн хэрэг, зохион бүтээгчид үүнийг судлах хэрэгтэй. Удахгүй бараг бүх вэб сайт дээр responsive дизайн гарах болно, учир нь улам олон хүмүүс хөдөлгөөнт төхөөрөмж ашиглаж байна.

Түүнтэй сайтууд үүнгүйгээр ийм төхөөрөмж дээр уншихад илүү тохиромжтой гэдгийг хэлмээр байна.

Өнөөдөр би танд вэбсайтаа дасан зохицох чадварыг шалгах боломжтой 5 маш хэрэгтэй, гайхалтай үйлчилгээг танилцуулахыг хүсч байна.

За ингээд явцгаая.

Сайтуудыг шалгах сайн үйлчилгээ. Таблет болон гар утасны дэлгэцийн нягтрал ихтэй байдаг.

Мэтт Керслигийн вэбсайтыг шалгах энгийн үйлчилгээ. Бүх алдартай хөдөлгөөнт төхөөрөмжийн нарийвчлалууд бас боломжтой.

Ямар ч сайтыг шалгах маш сайхан үйлчилгээ. Надад дизайн, функциональ байдал нь маш их таалагдсан.

Маш үзэсгэлэнтэй, ажиллагаатай үйлчилгээ. Сайт нь зурагтаар хэрхэн харагдахыг ч шалгах боломжтой :-)

Технологи байнга сайжирч, ухаалаг утас, таблетууд илүү хүйтэн болж, хэрэглэгчид илүү хөдөлгөөнт болж байна. Одоогийн байдлаар гар утасны төхөөрөмжүүдийн үзэгчдийн тоо хэрэглэгчдийн тооноос давсан байна хувийн компьютерууд. Энэ нь сайтуудын бүхэл бүтэн чиг хандлагыг бий болгосон нь хоосон биш юм хөдөлгөөнт төхөөрөмжүүд.

Жишээлбэл, хэрэв та ухаалаг гар утсаараа дамжуулан ердийн вэбсайтыг (дасан зохицох загвар, гар утасны хувилбаргүйгээр) нээвэл энэ нь хэрэглэгчдэд тохиромжгүй хэлбэрээр нээгдэх магадлалтай. Тэдгээр. агуулгыг бүрэн хэмжээгээр харуулах боловч хэвтээ гүйлгэх бөгөөд энэ нь муу юм.

Дасан зохицох вэбсайтын зохион байгуулалт нь иймэрхүү байна html зохион байгуулалт, хөтчийн цонхны хэмжээнээс хамааран сайтыг хэрэглэгчдэд ээлтэй харагдац болгон "хувиргадаг"

Бүү андуураарай гар утасны хувилбарвэбсайт болон дасан зохицох вэбсайтын зохион байгуулалт. Гар утасны хувилбар нь тусдаа дэд домайн дээр байрладаг бөгөөд сайтын агуулгыг бүрэн хуулбарладаг. Хариуцлагатай сайт нь ижил хуудасны URL-г агуулдаг боловч төхөөрөмжөөс хамааран ачаалагддаг өөр өөр хэв маягСайтыг илүү тохиромжтой байдлаар харуулах боломжийг олгодог CSS.

Хайлтын системүүд одоогоор хоёр өөр үр дүнтэй байна (тэдгээр нь маш төстэй). Нэг нь PC хэрэглэгчдэд, нөгөө нь гар утсанд зориулагдсан. Хэрэв сайтыг хөдөлгөөнт төхөөрөмжид тохируулаагүй бол энэ нь сөрөг хүчин зүйл гэж тооцогддог бөгөөд сайтын байр суурь 2-3 (заримдаа илүү) буурах болно. Үүний зэрэгцээ зөвхөн гар утасны хувилбарын байрлалыг бууруулсан бол логик байх болно, гэхдээ сайтын үндсэн хувилбарын байрлал мөн муудаж байгааг практик харуулж байна.

Энэхүү тэгш бус байдлыг хайлтын системүүд нь ширээний болон хөдөлгөөнт төхөөрөмжөөс зан үйлийн хүчин зүйлсийг нэгтгэх магадлал өндөр байдагтай холбон тайлбарлаж болно. Үүний үр дүнд, мэдээжийн хэрэг, хэрэв сайт дасан зохицоогүй бол түүний PF нь улам дордох бөгөөд энэ нь сайтын үндсэн хувилбарыг доош татах болно.

Та сайтыг нээх замаар л дасан зохицох чадварыг нь шалгаж болно өөр өөр хөтөчболон дэлгэцийн өргөнийг өөрчлөх. Гэхдээ үүнийг янз бүрийн зүйлээс хий янз бүрийн төхөөрөмж-тай өөр өөр нарийвчлалтай- маш удаан хугацаа шаардагдана. Танд олон арван ухаалаг утас, таблет байх магадлал багатай.

Интернет дээр илүү хурдан бөгөөд хялбар шийдэл байдаг. Жишээлбэл, та үүнийг хөтөч дээрээ суулгаж болно Гүүгл Кромтусгай Window Resizer залгаас ба үүнийг ашиглан сайтыг хамгийн алдартай нягтралтайгаар нээх.

Та зүгээр л гараар хөтчийн цонхны өргөний хэмжээг өөрчилж, үр дүнг харах боломжтой. Firefox эсвэл Google Chrome нь Ctrl+Shift+M товчийг дарснаар хөтчийн мэдрэмжтэй дизайнтай.

Хамгийн чухал нөхцөл бол хуудсан дээр хэвтээ гүйлгэх, флаш залгаас байхгүй байх явдал юм.

Google нь хайлтын алгоритмдаа дасан зохицох чадварын хүчин зүйлийг анх нэвтрүүлсэн. Түүнд онцгой зүйл бий үнэ төлбөргүй үйлчилгээ, ямар ч вэб сайтыг гар утасны төхөөрөмжид оновчтой болгохын тулд дүн шинжилгээ хийдэг. Yandex энэ функцийг хэсэг хугацааны дараа нэвтрүүлсэн.

Шалгасны дараа хоёр сонголт байна. Сайт оновчлогдсон эсвэл оновчгүй байна:

Жишээлбэл, Google-ийн хариу үйлдэл үзүүлэх тест:

Yandex-д дасан зохицох чадварыг шалгах:

Зөвхөн CSS болон html-ийг ойлгодог хүн л дасан зохицох вэбсайтын зохион байгуулалтыг хийж чадна. Ганц жор байхгүй тул бид гол санааг авч үзэх болно.

Дасан зохицох загвар гаргахын тулд та гурав дахь хувилбарт CSS загварын хуудас үүсгэх хэрэгтэй. 2 ба 3-ын хооронд ялгаа байгаа боловч энэ асуудалд хэв маягийн үнэмлэхүй үнэ цэнэ байхгүй байх нь маш чухал юм. Товчоор хэлбэл, бүх блокийн хэмжээ нь урт, өргөн, хэмжээс юм - энэ бүгдийг хувиар зааж өгсөн болно.

CSS @Media синтакс

Жишээлбэл, дэлгэцийн өргөн нь 800px-ээс бага төхөөрөмжүүдэд ямар загварууд ажиллах нөхцөлийг бичье.

Загваруудыг өндөр нарийвчлалаас жижиг хүртэл дараалан бичих ёстой, өөрөөр хэлбэл эхлээд ерөнхий хэв маяг, дараа нь "тайрсан" хэмжээтэй байх ёстой, жишээлбэл:

Толгойн шошгонд та дараах мөрийг оруулах ёстой.

Viewport мета шошго нь дэлгэцийн өргөн нь хөтчийн өргөн бөгөөд пиксел бүр нь төхөөрөмж дээрх нэг пикселтэй тохирч байна. Хэрэв үүнийг заагаагүй бол дасан зохицох чадвар хэрэгжихгүй.

Жишээлбэл, хуудсан дээр маш урт үг байх бөгөөд хэрэв халих шинж чанарыг тохируулаагүй бол энэ нь хэвтээ гүйлгэх харагдах байдалд хүргэж болзошгүй юм. Үүнээс зайлсхийхийн тулд та контент дээрээ дараах зүйлийг бичих хэрэгтэй. CSS шинж чанарууд

Сайтын хажуугийн самбар нь ихэвчлэн 200-300 пикселийн өргөнийг эзэлдэг бөгөөд энэ нь хөдөлгөөнт төхөөрөмж дээрх хөтчийн бараг бүх өргөнийг эзэлдэг. Тиймээс унждаг цэсийг ихэвчлэн гурван цохилт хэлбэрээр стандарт товчлуур ашиглан үүсгэдэг (энэ нь аль хэдийн сонгодог болсон).

Та үүнийг сайт дээр хэрэгжүүлж болно, гэхдээ та хэв маягийг бага зэрэг хийх хэрэгтэй болно. Бүх зүйлийг алхам алхмаар авч үзье.

Бид цэс болон үндсэн агуулгатай байх нөхцөл байдал (би толгой ба хөлийг зураагүй):

Ийм бүтцийн HTML код нь иймэрхүү байж болно:

• Цэс 1 дэх холбоос
• Цэс 2 дахь холбоос
• Цэс 3 дахь холбоос
• Цэс 4 дэх холбоос

Хуудасны агуулга

Хуудасны агуулга

Хуудасны агуулга

Хуудасны агуулга

Хуудас руу хөрвүүлдэг

Энэ аргын сул тал нь жижиг нарийвчлалтайгаар цэс нь талбайн бараг бүх өргөнийг эзлэх бөгөөд энэ нь хэвтээ гүйлгэх, эсвэл бүр дордох болно гэсэн үг юм - бүх блокууд хөвж болно.

Жишээгээ дараах байдлаар өөрчилье. Хэрэв дэлгэцийн нягтрал 800 пикселээс бага бол цэс алга болж, тусгай нээлттэй цэсийн товчлуур гарч ирнэ.

Энд тайлбар бүхий дасан зохицох html код байна:

• Цэс 1 дэх холбоос
• Цэс 2 дахь холбоос
• Цэс 3 дахь холбоос
• Цэс 4 дэх холбоос

Хуудасны агуулга

Хуудасны агуулга

Хуудасны агуулга

Хуудасны агуулга

Дэлгэцийн өргөнийг 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 шалгагч. Хуучин хувилбарт сайтыг турших боломжийг олгодог програм байдаг Internet Explorer. Өнөөдөр олон үйлчлүүлэгчид энэ хөтөчийг дэмжих шаардлагатай хэвээр байгаа тул сайтыг бусадтай ижил байдлаар харуулах болно. Магадгүй та ижил төстэй шалгалт хийх боломжтой онлайн үйлчилгээнүүд аль хэдийн байдаг. Ямар ч тохиолдолд та шаардлагатай кодыг оруулахад л хангалттай бөгөөд програм нь IE 6, 7, 8-д энэ бүхэн хэрхэн харагдахыг харуулах болно.

Ихэвчлэн зургаа дахь хувилбарын хувьд хэнд ч дэмжлэг хэрэггүй бөгөөд мэдээжийн хэрэг таны зохион байгуулалтад шинэ CSS шинж чанарууд байхгүй бол найм дахь хувилбар нь зохих ёсоор ажиллах боломжтой. IE-ийн хуучин хувилбарууд нь сонирхолтой шинж чанартай байдаг - тэд тайлбар бичсэн кодыг уншдаг. Тиймээс, тайлбаруудын аль нэгэнд та энэ хөтчийн хуучин хувилбаруудад тусгайлан үүсгэх загварын хуудсыг оруулж болно.

Бусад хөтөч энэ хэсгийг зүгээр л алгасах болно. Хэрэв танд үнэхээр IE дэмжлэг хэрэгтэй бол энэ аргыг ашиглаж болно.

Бусад үйлчилгээ. Сүүлийн үед зохион байгуулалтыг шалгах үйлчилгээ улам бүр нэмэгдсээр байна. Тодорхой нэг зүйлийн талаар ярих нь утгагүй юм. Эдгээр үйлчилгээнүүдийн ихэнх нь сайн ажилладаг ч бүх зүйлийг сайтар шалгадаггүй.

Бид бас дасан зохицох зохион байгуулалтын талаар ярих ёстой. Үүний хамгийн сайн хэрэгсэл бол ердийн хөтөчийн цонх юм. Зөвхөн цонхны өргөнийг багасгаж, дизайн хэрхэн өөрчлөгдөж байгааг ажиглаарай. Хэрэв та хэвтээ гүйлгэх тэмдэг гарч ирвэл эсвэл зарим элементүүд хуудсан дээр тохирохгүй байвал энэ нь таны зохион байгуулалт хамгийн тохиромжтой биш бөгөөд үүнийг сайжруулах шаардлагатай гэсэн үг юм. Хэрэв та сайт хэрхэн ажиллахыг харахыг хүсвэл том дэлгэц- жижигрүүлэх. Мэдээжийн хэрэг, хэрэв та таблет, утастай бол өөрийн зохион байгуулалтыг зарим үнэгүй хостинг руу байршуулж, эдгээр төхөөрөмжөөс сайт руу нэвтрэх боломжтой.

Цагаан будаа. 2. Хөтөчийн цонхны өргөнийг өөрчлөх нь хариу үйлдэл үзүүлэх чадварыг шалгах хамгийн хялбар арга юм.

Та вэбсайтын байршлыг өөр яаж шалгах вэ? Хөтөч хоорондын нийцтэй эсэхийг шалгах ёстой. Та өөр өөр хөтөч дээр сайтуудыг нээж, тэнд хэрхэн харагдахыг харах хэрэгтэй. Та үсгийн хэмжээ, хэмжээг өөрчлөх боломжтой. Та наад зах нь хэрэглэгчдийн ихэнх нь зүгээр байх болно гэдэгт итгэлтэй байх хэрэгтэй. Хэрэв та гараар шалгавал найзуудаасаа хөтчийнхөө хувилбарыг таныхаас өөр эсэхийг шалгахыг хүсч болно. Энд бид өөр нэг зөвлөгөө өгөх болно - зөвхөн нэг хөтөч дээр дэмжигддэг хэт тодорхой шинж чанаруудыг бүү ашигла. Хэрэв та тэдгээрийг аль хэдийн ашиглаж байгаа бол бусад хөтөч дээр өөр хувилбарыг олоорой. Зарим шинж чанарууд нь үйлдвэрлэгчийн угтварыг ашиглах шаардлагатай хэвээр байна. Учир нь вэб стандартууд байнга шинэчлэгдэж байдаг бөгөөд бүх хөтөч бүх зүйлийг дэмждэггүй. Гэхдээ хэрэв та хөтчүүд хоорондын нийцтэй эсэхийг аль хэдийн шалгасан бол дор хаяж Chrome, Mozilla, Opera, Safari, IE хөтчүүдэд үүнийг хий.

Хөтөч хоорондын дэвшилтэт баталгаажуулалтын гадаад маш сайн үйлчилгээнүүд байдаг. Жишээлбэл, browserstack.com. Энэ чек танд мөнгө зарцуулж магадгүй. Хэрэв танд үнэхээр том төсөл байгаа бөгөөд та үүнийг сайтар шалгахыг хүсч байвал ийм үйлчилгээг ашиглах нь зүйтэй юм.

Та мөн зохион байгуулалтыг дараах байдлаар шалгаж болно: сайтын байршлын дэлгэцийн агшинг Photoshop дахь байршилд шинэ давхарга болгон нэмэх ёстой. Энэ давхаргыг ил тод болгож, элементүүдийн дэлгэц нь зохион байгуулалттай хэр нийцэж байгааг хараарай. Үүний тулд та тусгай залгаасыг ашиглаж болно. Жишээлбэл, Mozilla-д зориулсан Pixel Perfect.

Мэдээжийн хэрэг, аливаа ердийн зохион байгуулалтад кодчилол болон баримт бичгийн төрлийг зааж өгөх ёстой. Та мөн зургийг унтраасан эсвэл JavaScript кодыг блоклосон функцийг хуудаснаас шалгаж болно. Баримт нь ямар ч хөтөчийн тохиргоонд хэрэглэгч эдгээр сонголтыг идэвхгүй болгож болно. Зурган дээрх alt шинж чанаруудыг зааж өгөх нь ялангуяа ашигтай байх болно, ингэснээр тэд алга болоход хэрэглэгч ядаж ямар нэгэн байдлаар чиглүүлэх боломжтой болно. Үнэн хэрэгтээ, зохион байгуулалтад маш олон шаардлага тавьж болно. RuNet-д ч гэсэн шаардлагатай шалгалтуудын нэлээд хатуу жагсаалт байдаг. Жишээлбэл, HTML5 гарч ирснээр байршлыг зөв семантик тэмдэглэгээг шалгаж болно. Гэсэн хэдий ч энэ бүхэн шүүмжлэлтэй биш юм. Дээр дурдсан шалгалтууд нь хэвийн ажиллаж байгаа вэбсайтыг аюулгүй ажиллуулахад хангалттай юм.

Энэ нийтлэлд бид янз бүрийн програм, үйлчилгээ, хэрэгслийг ашиглан зохион байгуулалтыг шалгах үндсэн аргуудыг тайлбарласан. Энэ нь танд сайтыг ямар ч нөхцөлд дасан зохицоход тусална.