как выглядит сайт на разных устройствах
Бизнес
Наталья Березовская
проверяла сайты на адаптивность
Когда сайт одинаково хорошо и без ошибок отображается на смартфоне, планшете и большом мониторе, говорят, что он адаптивный.
Если есть проблемы с адаптивностью, то на каком-то устройстве сайт может выглядеть хорошо, а на другом картинки, кнопки и текст будут наезжать друг на друга. Это мешает пользователям взаимодействовать с сайтом. Например, клиент не сможет купить товар, если кнопка «в корзину» закрыта картинкой или оказалась за пределами экрана.
Чтобы проверить адаптивность конкретного сайта, его можно загрузить на нескольких устройствах с разными размерами и типами экранов. Или использовать для этого компьютер и специальные сервисы, которые имитируют отображение сайта на нужных устройствах: в этой статье расскажу о них подробнее.
Скорее всего, ИТ-специалисты не узнают для себя ничего нового.
Инструменты разработчика в браузере
Сколько стоит: бесплатно
Эту функцию еще называют веб-инспектором, исследованием элементов, DevTools. Она есть во всех распространенных браузерах. В Microsoft Edge, Google Chrome и Mozilla Firefox режим вызывается клавишей F12, еще в некоторых версиях может работать сочетание клавиш Shift+Ctrl+C в английской раскладке. Или можно навести на любой элемент страницы курсор, вызвать контекстное меню правой кнопкой мыши и нажать на кнопку «Проверить» или «Исследовать код элемента».
После этого откроется режим разработчика: чаще всего экран делится на две части, с одной стороны появляется панель с кодом, с другой — сайт. Нужно найти панель, отвечающую за адаптивность, или адаптивный дизайн: обычно это кнопка Dimensions слева сверху.
Как я сам сделал сайт и сколько за него плачу
Можно посмотреть, как будет отображаться сайт на разных поколениях Айфонов В браузере Opera панель разработчика отличается только цветом, суть та же. Красным подчеркнута строка, отвечающая за проверку адаптивностиСколько стоит: бесплатно
Это расширение для браузера Chrome. Сначала нужно его установить и перезагрузить браузер, затем открыть сайт, который хочется проверить, и кликнуть на иконку Responsive Viewer в правом верхнем углу.
Браузер обновит страницу, и станет видно панель адаптивности: появится отображение сайта сразу на нескольких устройствах. Какие конкретно устройства отображать, можно выбрать в панели слева: есть несколько моделей Айфонов, смартфонов от Samsung, Google и Microsoft, ноутбуки. Еще в панели сверху можно выбрать «ориентацию» устройств — вертикальное или горизонтальное расположение.
В помощь бизнесу: 13 сервисов для привлечения клиентов в интернете
В Responsive Viewer можно изменить масштаб и ориентацию экранаСколько стоит: бесплатно
Сервис пригодится для проверки отображения сайта на мобильных и планшетах. Можно выбрать операционную систему смартфона и конкретную модель, на которой хочется его протестировать: есть практически все модели Айфонов, от SE до 12 Pro, а Android представлен моделями Samsung Galaxy S10 Lite, S20, Note20 и A71.
Дополнительно в сервис встроен валидатор — программа, которая проверяет HTML-код сайта по современным стандартам и показывает ошибки верстки, если такие есть.
Сервис показывает, как ваш сайт выглядит сразу на нескольких устройствахСколько стоит: от 29 $ в месяц, первые 30 минут бесплатно
В этом онлайн-сервисе можно проверить, как сайт или мобильное приложение выглядит на эмуляторах разных устройств, в том числе на последних моделях Apple и Samsung и в разных браузерах.
Для проверки нужно выбрать браузер, затем операционную систему и наконец конкретную модель устройства.
Как обманывают сеошники
Сервис BrowserStack платный, но у нового аккаунта есть 30 бесплатных минут, чтобы его протестировать. При регистрации просят корпоративный адрес электронной почты: почта на Yandex и Mail не подошла, но почту Google сервис использовать разрешил.
В BrowserStack можно проверить отображение сайта не только на каком-то устройстве, но и в конкретном браузере на этом устройстве. Например, как поведет себя сайт в браузере Google Chrome на смартфоне Samsung Galaxy S21Blisk — это браузер для проверки адаптивности на 50 устройствах: чтобы им воспользоваться, нужно скачать приложение с официального сайта и установить на компьютер.
Для проверки доступны браузеры с разрешением экранов Айфонов от SE до 12 Pro, Google Pixel до 4XL, старых моделей Samsung Galaxy от S6 до S9. Кроме смартфонов можно протестировать, как выглядит сайт на Айпадах, ноутбуках и компьютерах разного разрешения.
Как и во всех сервисах, ориентацию виртуального устройства можно поменять с вертикальной на горизонтальную.
Можно делать скриншоты или записывать на видео происходящее в браузере.
На старте браузер попросит вас выбрать устройства, в которых нужно проверить сайтСколько стоит: бесплатно
Screenfly — онлайн-сервис с большим выбором устройств: Айфоны от 5 до XS Max, Samsung Galaxy от S7 до S9+ и еще несколько старых смартфонов на Android.
Можно выбрать отображение на планшете — iPad Mini, Air и Pro, Samsung Galaxy Tab 10, проверить вид сайта на ноутбуках и стационарных компьютерах или задать свой размер экрана.
Сервис показывает отображение сайта сразу на двух устройствах — смартфоне и планшетеВведение в кросс-браузерное тестирование — Изучение веб-разработки
- Обзор: Cross browser testing
- Далее (en-US)
Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как «что такое кросс-браузерное тестирование?», «с какими распространёнными проблемами можно столкнуться?» и «какие основные подходы для тестирования, обнаружения и исправления проблем существуют?»
| Необходимые условия: | Знакомство с основами HTML, CSS, и JavaScript. |
|---|---|
| Цель: | Улучшить понимание идей кроссбраузерного тестирования. |
Кросс-браузерное тестирование — это практика обеспечения уверенности в том, что веб-сайты и веб-приложения, которые вы создаёте, работают в приемлемом количестве браузеров. Обязанность веб-разработчика быть уверенным, что проект работает не только у вас, а у всех ваших пользователей, независимо от браузера, устройства, или других вспомогательных инструментов, которые они используют. Вы должны думать о:
- Других браузерах. Не тех нескольких, которые вы регулярно используете, а о довольно старых, которые некоторые люди могут использовать до сих пор, и которые не поддерживают современные возможности CSS и JavaScript.
- Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и «умных» телевизоров, до дешёвых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.
- Людях с инвалидностью, которые используют Web с помощью вспомогательных технологий, таких как скринридеры, или не используют мышь (некоторые используют только клавиатуру).
Поймите, что вы — не ваши пользователи — если ваш сайт работает на Macbook Pro или Galaxy Nexus, это не значит, что он будет работать так для всех пользователей — нужно сделать много тестов!
Примечание: Статья сделаем веб доступным для всех предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.
Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, «работающих кросс-браузерной», на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию.
С другой стороны, плохо, когда сайт полноценно работает для обычных людей, но может быть совершенно недоступен для людей, имеющих проблемы со зрением, т.к. их приложения для чтения экрана не могут распознать информацию на сайте.
Когда мы говорим «приемлемое количество браузеров», мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. Gotta test ’em all?
(en-US)), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.Примечание: Мы разберём defensive coding позже в этом модуле.
Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. Отладка HTML, Отладка CSS, and Что пошло не так? Устранение ошибок JavaScript из предыдущего раздела).
Кросс-браузерные проблемы возникают потому-что:
- иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жёстче соблюдают стандарты, но различия и баги всё же иногда возникают.
- браузеры имеют разную степень поддержи современных технологий. Это неизбежно, когда вы имеете дело с новейшими функциями, которые браузеры только начинают осваивать, или если вы вынуждены поддерживать очень старые браузеры, которые более не дорабатываются или которые могли быть заморожены (то есть в них не добавляют новый функционал) задолго до того, как придумали новые возможности. Например, если вы хотите использовать передовые возможности JavaScript на вашем сайте, то они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вы можете конвертировать ваш код под старый синтаксис, используя специальные компиляторы.
- некоторые устройства могут иметь ограничения, из-за которых сайт работает медленно или отображается неверно. Например, если сайт был спроектирован для просмотра на десктопных устройствах, он возможно будет выглядеть мелко и трудночитаемо на мобильных устройствах. Если ваш сайт содержит множество больших анимаций, это может быть хорошо на высокопроизводительных планшетах, но может быть вялым или резким на устройствах меньшей производительности.
Это неизбежно, когда вы имеете дело с новейшими функциями, которые браузеры только начинают осваивать, или если вы вынуждены поддерживать очень старые браузеры, которые более не дорабатываются или которые могли быть заморожены (то есть в них не добавляют новый функционал) задолго до того, как придумали новые возможности. Например, если вы хотите использовать передовые возможности JavaScript на вашем сайте, то они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вы можете конвертировать ваш код под старый синтаксис, используя специальные компиляторы.
а также другие причины.
В статьях далее, мы выясним основные проблемы кросс-браузерности и посмотрим на их решения.
Может показаться, что тестирование — это затратно и страшно, но это важно — вы должны спланировать и убедиться, что вы делаете тесты в нужных местах, чтобы не было неожиданных проблем. Если вы работаете над большим проектом, вы должны тестировать его регулярно, чтобы убеждаться, что новые возможности работают корректно для вашей целевой аудитории, и что новый код не ломает старый функционал.
Если вы будете тестировать в конце проекта, любые не обнаруженные баги будут гораздо более затратными по времени для исправления, если бы вы их тестировали и обнаруживали своевременно.
Рабочий процесс над тестированием и исправлением ошибок может быть разбит на следующие четыре фазы (очень грубое разделение — у разных людей этот процесс может очень сильно отличаться):
Начальное планирование > Разработка > Тестирование > Исправление ошибок
Шаги 2-4 будут повторяться до тех пор, пока не будут реализованы все возможности.
Мы рассмотрим различные элементы процесса тестирования более детально в следующих статьях, но пока давайте соберём то, что может происходить на каждом этапе.
Начальное планирование
На этом этапе у вас, возможно, будет несколько встреч с владельцем/заказчиком сайта (это может быть ваш босс или кто-то из другой компании, для кого вы пишете сайт), чтобы точно определить, каким должен быть сайт — какой контент и функциональность должны быть на сайте, как сайт должен выглядеть и т.д. На этом этапе вы также хотите знать сколько времени у вас есть на разработку и цену работы. Не хочется углубляться в детали, но такое планирование оказывает большое влияние на кросс-браузерное тестирование.
Once you’ve got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? The client might already have data about this from previous research they’ve done, e.
g. from other web sites they own, or from previous versions of the web site you are now working on. If not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. You can also use a bit of intuition.
So for example, you might be building an e-commerce site that serves customers in North America. The site should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.
Now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won’t work in IE versions before 11.
You’d have to agree to provide a version of the site without this feature to users of older IE versions.
You should compile a list of the potential problem areas.
Примечание: You can find browser support information for technologies by looking up the different features on MDN — the site you’re on! You should also consult caniuse.com, for some further useful details.
Once you’ve agreed on these details, you can go ahead and start developing the site.
Development
Now on to the development of the site. You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. You might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.
There are multiple general strategies to cross browser development, for example:
- Get all the functionality working as closely as possible in all target browsers. This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a Polyfill to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.
- Accept that some things aren’t going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don’t support the full functionality. Sometimes this is inevitable due to device constraints — a cinema widescreen isn’t going to give the same visual experience as a 4″ mobile screen, regardless of how you program your site.
- Accept that your site just isn’t going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it.
This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a Polyfill to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don’t leave all the testing till the end!
Testing/discovery
After each implementation phase, you will need to test the new functionality.
To start with, you should make sure there are no general issues with your code that are stopping your feature from working:
- Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.
- Do some low fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.
- Test on a mobile platform, such as Android or iOS.
At this point, fix any problems you find with your new code.
Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on determining your target browsers (en-US)). For example:
- Try to test the latest change on all the modern desktop browsers you can — including Firefox, Chrome, Opera, IE, Edge, and Safari on desktop (Mac, Windows, and Linux, ideally).
- Test it in common phone and tablet browsers (e.g. iOS Safari on iPhone/iPad, Chrome and Firefox on iPhone/iPad/Android),
- Also do tests in any other browsers you have included inside your target list.
The most low fi option is to just do all the testing you can by yourself (pulling in team mates to help out if you are working in a team). You should try to test it on real physical devices where possible.
If you haven’t got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). This is a very popular choice, especially in some circumstances — for example, Windows doesn’t let you have multiple versions of Windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here.
Another option is user groups — using a group of people outside your development team to test your site. This could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide results.
Finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time. You can set up your own testing automation system (Selenium being the popular app of choice) that could for example load your site in a number of different browsers, and:
- see if a button click causes something to happen successfully (like for example, a map displaying), displaying the results once the tests are completed
- take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.
You can also go further than this, if wished.
There are commercial tools available such as Sauce Labs, Browser Stack, LambdaTest, TestingBot, and CrossBrowserTesting that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. It is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass.
Testing on prerelease browsers
It is often a good idea to test on prerelease versions of browsers; see the following links:
- Firefox Developer Edition
- Edge Insider Preview
- Safari Technology Preview
- Chrome Canary
- Opera Developer
This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser’s developers have fixed the bug in a newer version.
Fixes/iteration
Once you’ve discovered a bug, you need to try to fix it.
The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists.
It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly (version 52), then they have fixed it. If it is not fixed, then you may want to file a bug (see Reporting bugs, below).
If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug (again, see Debugging HTML, Debugging CSS (en-US), and What went wrong? Troubleshooting JavaScript).
Once you’ve discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can’t just change the problem code outright, as this may break the code in other browsers. The general approach is usually to fork the code in some way, for example use JavaScript feature detection code to detect situations in which a problem feature doesn’t work, and run some different code in those cases that does work.
Once a fix has been made, you’ll want to repeat your testing process to make sure your fix is working OK, and hasn’t caused the site to break in other places or in other browsers.
Just to reiterate on what was said above, if you discover bugs in browsers, you should report them:
- Firefox Bugzilla
- EdgeHTML issue tracker
- Safari
- Chrome
- Opera
This article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing.
Armed with this knowledge, you are now ready to move on and start learning about Cross browser testing strategies.
- Обзор: Cross browser testing
- Далее (en-US)
- Introduction to cross browser testing
- Strategies for carrying out testing (en-US)
- Handling common HTML and CSS problems
- Handling common JavaScript problems (en-US)
- Handling common accessibility problems (en-US)
- Implementing feature detection
- Introduction to automated testing (en-US)
- Setting up your own test automation environment (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on by MDN contributors.
Как легко протестировать веб-сайт в разных браузерах (3 инструмента)
Контент Themeisle бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Подробнее
Не все веб-браузеры одинаковы. Хотя большинство популярных вариантов похожи, они все же достаточно различны, чтобы не обязательно отображали ваш веб-сайт таким же образом. Поэтому крайне важно протестировать веб-сайт в разных браузерах.
Выполнение этого типа кросс-браузерного тестирования необходимо для любого сайта WordPress, большого или маленького. В конце концов, вы хотите, чтобы ваши посетители имели беспроблемный опыт, независимо от того, какое устройство и браузер они используют для изучения вашего контента. Потратив немного времени и усилий, вы можете убедиться, что ваш сайт хорошо работает и хорошо выглядит несмотря ни на что .
В этом посте мы объясним, почему кроссбраузерное тестирование — это то, что вам нужно делать как при первом создании сайта, так и периодически после этого.
Затем мы покажем вам, как протестировать веб-сайт в разных браузерах с помощью трех простых инструментов. Давайте прыгать прямо в!
Почему важно тестировать сайт в разных браузерах
Вероятно, у вас есть любимый браузер — у большинства людей он есть — и, скорее всего, вы всегда используете его для работы на своем веб-сайте. Наиболее вероятным кандидатом является Chrome, у которого на сегодняшний день самая большая доля рынка. Однако такие альтернативы, как Firefox, Safari и Internet Explorer, по-прежнему популярны.
Если вы проводите время, используя только предпочитаемый браузер, можно легко забыть, что не все эти инструменты работают одинаково. Хотя большинство из них похожи по функциональности, они написаны по-разному и имеют разные наборы функций.
В результате один веб-сайт не всегда будет выглядеть или работать одинаково во всех браузерах. Если вы просматривали свой сайт только в Chrome и переключаетесь на Firefox или Safari, вы можете быть удивлены различиями.
Ваш макет может выглядеть не совсем правильно, а определенные функции могут даже работать неправильно.
К счастью, этой проблемы легко избежать, протестировав свой веб-сайт в различных браузерах, желательно в самых популярных. Поскольку это очень важная задача, существует множество ресурсов и инструментов, которые помогут вам начать работу.
Как протестировать ваш сайт WordPress в нескольких браузерах (3 простых инструмента)
Трудно точно предсказать, как ваш сайт будет работать в том или ином браузере. Чтобы избежать потенциальных проблем, лучшее и самое простое решение — провести тестирование. пока ты может загружать многие браузеры и выполнять эти тесты вручную, этот процесс намного проще с некоторыми специальными инструментами.
Очень важно протестировать веб-сайт в разных браузерах, когда вы впервые разрабатываете его или вносите существенные изменения. Тем не менее, также целесообразно периодически повторять эти тесты, поскольку браузеры претерпевают множество обновлений и изменений.
Мы рекомендуем проводить тщательную кросс-браузерную проверку не реже одного раза в год.
Следующие три инструмента помогут вам в этом. Хотя у них одни и те же основные цели, каждая из них предлагает разные функции и результаты. Таким образом, вы можете попробовать все из них и посмотреть, какой из них лучше всего соответствует вашим потребностям.
1. Кроссбраузерное тестирование
Если вы хотите протестировать свой веб-сайт, используя полный набор функций, CrossBrowserTesting — отличное место для начала. Этот инструмент предлагает несколько вариантов и может делать снимки экрана, чтобы вы могли их просмотреть и сравнить.
Кроме того, CrossBrowserTesting позволяет экспериментировать с функциональностью вашего веб-сайта. Он позволяет вам виртуально протестировать свой сайт на реальных устройствах и предлагает более 2050 комбинаций версий браузеров и разрешений экрана.
Со всеми этими предлагаемыми функциями вы, вероятно, не удивитесь, узнав, что этот инструмент не бесплатный.
Самый дешевый план стоит 31 доллар в месяц при ежегодной оплате и включает неограниченное ручное тестирование для одного пользователя.
Тем не менее, есть также 7-дневная бесплатная пробная версия, предлагающая 100 автоматических и 100 минут ручного тестирования. Этого времени достаточно, чтобы опробовать все функции, посмотреть, нравятся ли они вам, и даже протестировать небольшой сайт.
После регистрации учетной записи вы получите доступ к полной панели инструментов:
Вы можете использовать вкладку Скриншоты для получения статических изображений вашего сайта или ввести свой URL-адрес в поле Начать живое тестирование для выполнения полного теста. Наконец, выберите свое устройство и выберите операционную систему (ОС) и желаемое разрешение:
.После запуска теста вы получите доступ к полной симуляции вашего сайта:
На этом этапе вы захотите взаимодействовать с основными функциями вашего сайта, нажимать кнопки, пробовать перемещаться по меню и т.
д. Обращайте внимание как на визуальные, так и на функциональные проблемы. Однако не пугайтесь, если заметна задержка — это всего лишь побочный эффект самой симуляции.
После этого вы можете продолжать выполнять тесты в других комбинациях устройств, браузеров и разрешений. Этот процесс может занять некоторое время, в зависимости от размера вашего сайта. Тем не менее, объем подробной информации, к которой вы получите доступ, должен стоить потраченного времени.
2. Сравнение
Если вы ищете бесплатную платформу для тестирования своего веб-сайта в разных браузерах, вы можете рассмотреть возможность использования Comparium. Этот бесплатный инструмент делает снимки экрана из нескольких браузеров, чтобы сравнивать изображения и искать ошибки.
Как и CrossBrowserTesting, Comparium также включает инструмент живого тестирования, который вы можете использовать для ручного мониторинга вашего сайта в различных средах браузера. Платформа может выявлять проблемы с отзывчивостью, разрешениями на разных экранах и визуальными несоответствиями.
Однако Comparium немного более ограничен, чем CrossBrowserTesting. В настоящее время он поддерживает только живое тестирование в браузерах Linux и Windows 10. Платформа еще не имитирует устройства MacOS, Android или iOS.
Вы можете создать бесплатную учетную запись для использования Comparium. Этот план будет включать в себя 1000 скриншотов и 40 живых сессий в месяц. Кроме того, вы можете перейти на один из премиальных пакетов по цене от 149 долларов в год.
Вы можете ввести имя пользователя и пароль, чтобы начать, или зарегистрироваться с помощью своей учетной записи Google:
Затем вы можете использовать инструмент для создания снимков экрана или провести живое тестирование с панели управления пользователя. Если вы выберете первый вариант, введите URL своего веб-сайта, и вы увидите что-то вроде этого:
Кроме того, вы можете ввести свой URL-адрес в поле Live testing и выбрать браузеры для тестирования. Затем вы увидите смоделированную среду:
.
У вас будет ограничение по времени, если вы решите использовать бесплатную версию Comparium. Поэтому, если вы хотите тщательно и регулярно тестировать свой веб-сайт, вы можете рассмотреть возможность перехода на премиум-инструмент.
3. Браузер
Наконец, если вы ищете быстрый и безопасный способ протестировать веб-сайт в разных браузерах, Browserling предлагает удобный интерфейс. В отличие от двух других платформ, которые мы рассмотрели, вам не нужно создавать учетную запись для запуска простого теста. Вместо этого вы можете ввести свой URL-адрес на домашней странице и выбрать из списка браузеров:
Вам нужно будет подождать в очереди, а проверка веб-сайта ограничена тремя минутами. Кроме того, сайт отображается в небольшой песочнице, и вы не можете увеличивать масштаб. Однако вы можете переключаться между различными разрешениями экрана и браузерами, пока тест активен:
Browserling использует серверы виртуальных машин вместо эмуляторов для своих тестов.
Таким образом, вы увидите более точные результаты в различных браузерах. Кроме того, платформа использует шифрование SSL для защиты ваших данных.
Понятно, что бесплатный инструмент Browserling предлагает ограниченные возможности. Однако вы можете перейти на премиум-план, начиная с 19 долларов в месяц. Этот пакет включает в себя неограниченное тестирование в нескольких типах браузеров, скриншоты, локальное безопасное тестирование через туннели SSH и премиальную поддержку.
Наверх
Заключение
Тестирование вашего веб-сайта в разных браузерах — одна из тех задач, которую вы не хотите игнорировать, даже если это не очень интересно. Если вы хотите расширить свою аудиторию и обеспечить надежный пользовательский интерфейс, вы должны убедиться, что ваш сайт хорошо отображается во всех популярных браузерах.
К счастью, существует множество инструментов, которые помогут вам протестировать веб-сайт в разных браузерах. Три наших фаворита включают в себя:
- CrossBrowserTesting: Комплексный вариант премиум-класса, поддерживающий создание снимков экрана и тестирование в реальном времени с использованием физических устройств.
- Comparium: Freemium-инструмент, поддерживающий создание снимков экрана и живое тестирование в браузерах Linux и Windows 10.
- Browserling: Бесплатный инструмент, который вы можете использовать для быстрого тестирования вашего веб-сайта, с обновлением для доступа к снимкам экрана и функциям безопасного тестирования.
У вас есть вопросы о том, как протестировать сайт в разных браузерах? Дайте нам знать в комментариях ниже!
Была ли эта статья полезной?
Нет Спасибо за отзыв!тестовых веб-сайтов в разных браузерах
Перемещайтесь по лабиринту тестирования с помощью LambdaTest и тестируйте свои веб-страницы и веб-приложения в более чем 3000 различных браузерах, версиях браузеров и операционных системах, чтобы убедиться, что они работают во всех браузерах.
Доверяют более 1 млн пользователей по всему миру
ПРЕДПРИЯТИЯ ПО ВСЕМУ МИРУ ДОВЕРЯЮТ LAMBDATEST ДЛЯ ПРОВЕДЕНИЯ ТЕСТИРОВАНИЯ 3000+ сред
Протестируйте свой сайт в разных браузерах и на мобильных устройствах устройства.
Получите мгновенный доступ к выбору веб-браузеров, версий браузеров, операционных систем и разрешений экрана.
Точное тестирование
Тестирование в реальных настольных и мобильных браузерах
Тестирование вашего веб-сайта в различных операционных системах и браузерах. Вы можете использовать различные реальные устройства под управлением последних версий Windows, macOS, Android и iOS.
Просмотреть все браузеры и устройстваПростая отладка
Интегрированные собственные инструменты разработчика для отладки
Выполняйте отладку своего веб-сайта во всех браузерах на рынке, включая Chrome, Safari, Microsoft Edge, Yandex, Firefox и Brave. В каждом браузере предустановлены собственные инструменты разработчика.
Начните бесплатное тестированиеВозможности, которые помогут ускорить тестирование
Дело не только в инфраструктуре; вы получаете целый ряд дополнительных функций, которые помогут вам ускорить кроссбраузерное тестирование и быстрее выпускать продукты.
Плагины и расширения
Плагин для WordPress и расширение для Chrome, которые помогают выполнять кроссбраузерное тестирование, делать полностраничные скриншоты и создавать визуальные отчеты.
Тестирование Локально размещенные страницы
Локальное веб-тестирование позволяет проводить тестирование в средах разработки и помогает защитить ваш веб-сайт или приложение от ошибок после развертывания.
Тестирование геолокации
Протестируйте свой веб-сайт или мобильное приложение с разных IP-адресов, чтобы обеспечить бесперебойную работу пользователей в разных местах.
Попробуйте лямбда-тест сейчас !!
Получайте 60 минут живого интерактивного тестирования каждый месяц БЕСПЛАТНО !! Единственная бесплатная пожизненная платформа для кросс-браузерного тестирования.
- Кредитная карта не требуется.
- Бесплатная регистрация. Просто добавьте расширение Chrome перед запуском теста, и вам больше не придется добавлять расширение внутри виртуальной машины. Начать бесплатное тестирование
Тестирование с использованием собственных файлов в облаке
Улучшите тестирование веб-сайта, загрузив файлы, связанные с тестовым сценарием, в предпочитаемом формате (txt, pdf, doc, xls, docx, xlsx) с помощью Google Диска или любого другого облако хранения данных и откройте его на удаленной виртуальной машине. После загрузки файла он будет доступен на удаленной виртуальной машине LambdaTest.
Загрузить сейчасТестирование специальных возможностей
Используйте возможности чтения с экрана и средства просмотра речи с помощью NVDA (невизуальный доступ к рабочему столу) для сеансов Windows и Mac, чтобы проверить доступность цифрового контента и визуальное распознавание ваших веб-сайтов. Протестируйте свой веб-сайт в разных браузерах, чтобы обеспечить доступность для удобного взаимодействия с пользователем.
Начать бесплатное тестированиеМощная облачная платформа для тестирования для ускорения выхода на рынок
Безопасное, надежное и высокопроизводительное облако для выполнения тестов Build For Scale
Выполнение автоматизированных браузерных тестов в масштабируемом, безопасном и надежном облаке автоматизации . Запускайте тесты JavaScript или Selenium в более чем 3000 настольных и мобильных браузерах.
Подробнее об автоматизированном тестированииНевероятно быстрое выполнение тестов в облаке, которое превзойдет скорость выполнения локальных тестов. Эксклюзивная платформа LambdaTest, которая гарантированно работает быстрее, чем любое другое предложение облачной сетки.
Подробнее о HyperExecuteВыполняйте интерактивное кросс-браузерное тестирование общедоступных или локально размещенных веб-сайтов и веб-приложений в режиме реального времени в более чем 3000 реальных мобильных и настольных браузерах, работающих на реальных устройствах и в реальных ОС.
Подробнее о кросс-браузерном тестированииТестируйте свои нативные, гибридные или мобильные веб-приложения онлайн в масштабируемом облаке для тестирования мобильных устройств. Тестируйте и отлаживайте свои мобильные приложения быстрее как на эмуляторах/симуляторах, так и в онлайн-облаке реальных устройств.
Подробнее о тестировании мобильных приложенийУскорьте весь конвейер от разработки до выпуска. Получайте более быстрые отзывы об изменениях кода, управляйте ненадежными тестами и сохраняйте мастерство зеленым. Ведущая в отрасли платформа тестовой аналитики.
Подробнее о тестировании в масштабеВот почему LambdaTest является выбором для кросс-браузерного тестирования более чем 1 миллиона разработчиков и аналитиков качества точная инфраструктура без лагов
120+ интеграций
Легко вписывается в ваш стек тестирования благодаря готовым интеграциям
3000+ сред
Лучшее покрытие браузера в любой облачной сетке
Более 120 интеграций Посмотреть все
Вот почему LambdaTest является выбором облака автоматизации тестирования для более чем 1 миллиона разработчиков и аналитиков качества
Как LambdaTest помогает глобальным предприятиям
Как для малых и средних предприятий, так и для крупных предприятий.
Trepp
Возможность запускать наши скрипты Selenium в устаревших и новейших браузерах в LambdaTest помогла нам сэкономить значительное время при выполнении тестов без каких-либо проблем с обслуживанием инфраструктуры.
Аниш Охри
Руководитель отдела тестирования и повышения производительности
45X
Расширенное покрытие браузера
Edureka
Используя LambdaTest, команда смогла выполнить до 200 тестов одновременно через параллельный интерфейс тестирование. Наборы тестов, которые раньше занимали 60 минут, теперь занимают не более 5 минут.
Ловлин Бхатия
Соучредитель и генеральный директор
70%
Сокращение времени выполнения теста
Emburse
Использование кросс-браузерной автоматизации LambdaTest в облаке позволило Emburse сократить время выполнения тестов до 20% и добиться лучшего качества кода.
Алан Харвуд
Старший менеджер по проектированию
50%
Сокращение затрат на выполнение тестов и инфраструктуры
Noibu
LambdaTest сократил время, необходимое для воспроизведения и отладки проблемы.
Это помогло нам выявить проблемы, характерные для браузера, и увеличить время обратной связи с разработчиками на 400 %, а эффективность — на 100 %.Дэвид Сил
Руководитель группы (программная инженерия)
400%
Увеличено время обратной связи с разработчиком средний 1 минут на тест до 20 секунд, что на 66 % сокращает время выполнения теста.
Мэтт Ренч
Главный инженер по автоматизации
66%
Сокращение времени выполнения теста
LambdaTest — выбор №1 для малого и среднего бизнеса и предприятий по всему миру.
4.8 из 5 — G2 Crowd
Читать все отзывыБлагодарим вас за предоставление бесплатной лицензии с открытым исходным кодом для бесплатного запуска веб- и мобильных тестов наших проектов с открытым исходным кодом на платформе Lambdatest.
Мохаммад Фейсал Хатри
@faisalkhatri
Готовы начать?
Зарегистрируйтесь, чтобы использовать LambdaTest, это совершенно бесплатно, чтобы начать работу с
Часто задаваемые вопросы
Мы тестируем веб-сайт в различных браузерах, чтобы проверить, работает ли веб-сайт/веб-приложение должным образом во всех возможных комбинациях браузеров, ОС, устройств и разрешений.
Это помогло нам выявить проблемы, характерные для браузера, и увеличить время обратной связи с разработчиками на 400 %, а эффективность — на 100 %.