Javascript сворачивает окно браузера

Обновлено: 21.11.2024

В этом руководстве вы узнаете, как развернуть, свернуть или изменить размер окна браузера с помощью Selenium Webdriver. Объясняется в различных сценариях с использованием метода maximize() и размеров для изменения размера окна браузера.

Вот что мы покрываем:

Зачем максимизировать браузер в Selenium Automation?

Элементы в веб-приложении могут не распознаваться селеном, если браузер не развернут, что приведет к сбою фреймворка. Следовательно, максимизация браузера является очень важной частью фреймворка селена. Хорошей практикой является максимизация браузера при автоматизации любого веб-приложения. Когда пользователь выполняет фреймворк селена или любой скрипт, браузер может быть не в полноэкранном режиме, и вам необходимо развернуть браузер, используя максимизацию окна в Selenium, чтобы просмотреть все элементы веб-приложения. Хорошо развернуть браузер в начале скрипта, чтобы скрипт успешно выполнялся без ошибок.

Как развернуть окно в Selenium

Вот как развернуть браузер в Selenium:

Чтобы развернуть браузер в Selenium, вам нужно вызвать команду Maxim() Selenium, чтобы развернуть оконный интерфейс класса драйвера.

Вы можете настроить размер браузера в соответствии с требованиями сценария. Selenium webdriver не предоставляет никакого метода для сворачивания браузера, такого прямого метода нет. Вам нужно использовать метод изменения размера, чтобы свернуть браузер.

Пример: изменение размера браузера с помощью веб-драйвера selenium

a) Скрипт Selenium с объяснением.

Описание сценария. В приведенном ниже сценарии Selenium показано изменение размера браузера с использованием платформы testNG. Шаги сценария:

  1. Откройте браузер Chrome.
  2. Запустите сайт .
  3. Подождите несколько секунд, чтобы просмотреть действие изменения размера.
  4. Закройте браузер.

b) Анализ выходных данных

Открыл браузер Chrome, изменил размер браузера, подождал несколько секунд и закрыл браузер.

Пример. Разверните окно браузера с помощью веб-драйвера.

a) Скрипт Selenium с объяснением.

Описание сценария. В приведенном ниже сценарии максимизации в Selenium показано максимальное развертывание браузера с использованием платформы testNG. Шаги сценария для максимизации окна Selenium:

  1. Откройте браузер Chrome.
  2. Запустите сайт .
  3. Подождите несколько секунд, пока браузер не развернется в действии Selenium.
  4. Закройте браузер.

b) Анализ выходных данных

Открыл браузер Chrome, развернул браузер, подождал несколько секунд и закрыл браузер.

Пример. Сверните окно браузера с помощью веб-драйвера.

a) Скрипт Selenium с объяснением.

Описание сценария. В приведенном ниже сценарии Selenium показано свертывание браузера с использованием платформы testNG. Шаги сценария:

  1. Откройте браузер Chrome.
  2. Запустите сайт .
  3. Подождите несколько секунд, чтобы просмотреть действие сворачивания.
  4. Закройте браузер.

Примечание. Если пользователь хочет использовать браузер Firefox, ему необходимо установить свойство FirefoxDriver и создать объект FirefoxDriver вместо ChromeDriver во всех вышеперечисленных 3 сценариях сценариев, как показано ниже:

b) Анализ выходных данных

Открыл браузер Chrome, свернул браузер, подождал несколько секунд и закрыл браузер.


Это эффект, который я использовал в течение короткого времени на некоторых других сайтах, над которыми я работал, и я подумал, что он может стать хорошим руководством. Мне очень жаль, но на момент написания этого руководства (28.07.00 — последний день Кэти Ли с Регисом) оно работало только на Netscape Navigator 4.0 и выше.

В основном я использую этот эффект при открытии небольших окон, чтобы позволить пользователю видеть один фрагмент кода при чтении текста поверх текста в большом родительском окне. Часто у меня будет два дополнительных окна помимо родительского, и эти команды позволят пользователю свернуть и развернуть окна.

Обратите внимание, я предлагаю код только на страницах, которые будут отображаться в Navigator 4.0 и более поздних версиях. Я получаю этот эффект, используя сценарий внутреннего тестирования браузера (
Internal Browser Test
).

Хорошо, хватит болтать. Давай увидим это. Пример откроется в новом окне, чтобы вы могли увидеть эффект. Пожалуйста, поймите, что вы должны использовать Netscape Navigator 4 или лучше, чтобы увидеть его. После того, как вы нажмете «свернуть», подождите один момент. Мало того, что экран станет меньше, он переместится в правую нижнюю часть экрана. Это действительно отличный эффект.

Код

Вот что происходит

Вы заметите, что я установил две функции: одну для максимизации, а другую для минимизации.Если вы понимаете одно, то наверняка сможете разобрать и другое. Давайте посмотрим на первый.

Есть и другие способы получения того же эффекта изменения размера, но когда я впервые увидел это, автор использовал команды innerWidth и innerHeight, поэтому я оставил их такими. Эти две команды имеют дело с размерами внутреннего окна браузера в пикселях. Обратите внимание, что у меня установлено окно размером 100 на 100.

Следующие две строки устанавливают точку, чтобы команда alwaysLowered могла опустить и переместить окно в правый нижний угол экрана. Минимизация устанавливает X и Y на полный размер экрана, а Максимизация устанавливает нулевое значение, так что развернутый экран доходит до левого угла.

Триггерами событий являются ссылки JavaScript:

Нажмите на ссылку, и сработает та или иная функция. Ваш экран свернется или развернется. Поскольку сценарий настроен на чтение и работу с любыми параметрами экрана, настроенными вами или вашими пользователями, просто скопируйте, вставьте, и все готово.

Вот и все

Это не тот эффект, который вам захочется часто использовать. Я использую его очень редко, но я использовал его.

Когда вы включаете его на страницу, обязательно поместите ссылки, которые создают эффект, в верхнем левом углу. Таким образом, они будут видны, даже когда экран сворачивается и перескакивает в правый нижний угол.

Reflow — это название процесса веб-браузера для пересчета позиций и геометрии элементов в документе с целью повторного рендеринга части или всего документа. Поскольку перекомпоновка — это операция, блокирующая пользователя в браузере, разработчикам полезно понять, как улучшить время перекомпоновки, а также понять влияние различных свойств документа (глубина DOM, эффективность правил CSS, различные типы изменений стиля) на перекомпоновку. время. Иногда для перекомпоновки одного элемента в документе может потребоваться перекомпоновка его родительских элементов, а также любых элементов, следующих за ним.

Существует множество действий пользователя и возможных изменений DHTML, которые могут вызвать перекомпоновку. Изменение размера окна браузера, использование методов JavaScript, включающих вычисляемые стили, добавление или удаление элементов из DOM и изменение классов элементов — вот некоторые из вещей, которые могут вызвать перекомпоновку. Также стоит отметить, что некоторые операции могут потребовать больше времени на перекомпоновку, чем вы могли себе представить — рассмотрите следующую диаграмму из выступления Стива Содерса «Еще более быстрые веб-сайты»:

Из приведенной выше таблицы видно, что не все изменения стиля в JavaScript вызывают перекомпоновку во всех браузерах и что время, необходимое для перекомпоновки, различается. Также очевидно, что современные браузеры улучшают время перекомпоновки.

В Google мы тестируем скорость наших веб-страниц и приложений различными способами, и перекомпоновка — это ключевой фактор, который мы учитываем при добавлении функций в наши пользовательские интерфейсы. Мы стремимся предоставить живой, интерактивный и восхитительный пользовательский опыт.

Рекомендации

Вот несколько простых рекомендаций, которые помогут свести к минимуму перекомпоновку веб-страниц:

  1. Уменьшите ненужную глубину DOM. Изменения на одном уровне дерева DOM могут вызвать изменения на каждом уровне дерева — вплоть до корня и вплоть до дочерних элементов модифицированного узла. Это приводит к тому, что на перекомпоновку тратится больше времени.
  2. Сверните правила CSS и удалите неиспользуемые правила CSS.
  3. Если вы вносите сложные изменения в визуализацию, например анимацию, делайте это вне очереди. Для этого используйте абсолютную позицию или фиксированную позицию.
  4. Избегайте ненужных сложных селекторов CSS, в частности селекторов потомков, которые требуют больше ресурсов ЦП для сопоставления селекторов.

В этом видео Линдси объясняет несколько простых способов свести к минимуму перекомпоновку на ваших страницах:

Дополнительные ресурсы

Отзыв

Была ли эта страница полезной?

Если не указано иное, содержимое этой страницы предоставляется по лицензии Creative Commons Attribution 4.0, а образцы кода — по лицензии Apache 2.0. Подробнее см. в Правилах сайта Google Developers. Java является зарегистрированным товарным знаком Oracle и/или ее дочерних компаний.

Всплывающее окно — один из старейших способов показать пользователю дополнительный документ.

По сути, вы просто бежите:

… И откроется новое окно с заданным URL. Большинство современных браузеров настроены на открытие URL в новых вкладках, а не в отдельных окнах.

Всплывающие окна существуют с очень древних времен. Первоначальная идея заключалась в том, чтобы показать другой контент, не закрывая главное окно. На данный момент есть и другие способы сделать это: мы можем динамически загружать контент с помощью fetch и отображать его в динамически генерируемом файле

Кроме того, всплывающие окна сложны на мобильных устройствах, поскольку они не отображают несколько окон одновременно.

Тем не менее, есть задачи, в которых по-прежнему используются всплывающие окна, например для авторизации OAuth (вход через Google/Facebook/…), потому что:

  1. Всплывающее окно — это отдельное окно с собственной независимой средой JavaScript. Поэтому открывать всплывающее окно со стороннего, ненадежного сайта безопасно.
  2. Открыть всплывающее окно очень просто.
  3. Всплывающее окно может перемещаться (менять URL-адрес) и отправлять сообщения в открывающее окно.

Блокировка всплывающих окон

В прошлом вредоносные сайты часто злоупотребляли всплывающими окнами. Плохая страница может открыть множество всплывающих окон с рекламой. Поэтому сейчас большинство браузеров пытаются блокировать всплывающие окна и защищать пользователя.

Большинство браузеров блокируют всплывающие окна, если они вызываются вне обработчиков событий, запускаемых пользователем, таких как onclick .

Таким образом, пользователи в некоторой степени защищены от нежелательных всплывающих окон, но функциональность не отключается полностью.

Что делать, если всплывающее окно открывается по клику, но после setTimeout? Это немного сложно.

Всплывающее окно открывается в Chrome, но блокируется в Firefox.

…Если мы уменьшим задержку, всплывающее окно будет работать и в Firefox:

Разница в том, что Firefox считает допустимым тайм-аут 2000 мс и меньше, а после него — убирает «доверие», считая, что теперь оно «вне действия пользователя». Так что первый заблокирован, а второй нет.

окно.открыть

Синтаксис для открытия всплывающего окна: window.open(url, name, params):

url URL-адрес для загрузки в новое окно. name Имя нового окна. У каждого окна есть window.name , и здесь мы можем указать, какое окно использовать для всплывающего окна. Если окно с таким названием уже есть – в нем открывается указанный URL, иначе открывается новое окно. params Строка конфигурации для нового окна. Содержит настройки, разделенные запятой. В параметрах не должно быть пробелов, например: width=200,height=100 .

Настройки параметров:

  • Позиция:
    • left/top (numeric) – координаты левого верхнего угла окна на экране. Существует ограничение: новое окно нельзя расположить за пределами экрана.
    • width/height (число) – ширина и высота нового окна. Существует ограничение на минимальную ширину/высоту, поэтому невозможно создать невидимое окно.
    • строка меню (да/нет) — показывает или скрывает меню браузера в новом окне.
    • панель инструментов (да/нет) — показывает или скрывает панель навигации браузера (назад, вперед, перезагрузить и т. д.) в новом окне.
    • местоположение (да/нет) — показывает или скрывает поле URL в новом окне. FF и IE по умолчанию не позволяют его скрыть.
    • статус (да/нет) — показывает или скрывает строку состояния. Опять же, большинство браузеров заставляют его показывать.
    • изменяемый размер (да/нет) – позволяет отключить изменение размера для нового окна. Не рекомендуется.
    • полосы прокрутки (да/нет) — позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

    Существует также ряд менее поддерживаемых функций браузера, которые обычно не используются. Проверьте window.open в MDN для примеров.

    Пример: минималистичное окно

    Откроем окно с минимальным набором функций, просто чтобы посмотреть, какие из них браузер позволяет отключить:

    Здесь большинство «функций окна» отключены, а окно расположено за пределами экрана. Запустите его и посмотрите, что происходит на самом деле. Большинство браузеров «исправляют» странные вещи, такие как нулевая ширина/высота и левый/верхний край за пределами экрана. Например, Chrome открывает такое окно на всю ширину/высоту, чтобы оно занимало весь экран.

    Давайте добавим обычные параметры позиционирования и разумные координаты width , height , left , top:

    В большинстве браузеров приведенный выше пример отображается по мере необходимости.

    Правила для пропущенных настроек:

    • Если в вызове open нет третьего аргумента или он пуст, используются параметры окна по умолчанию.
    • Если есть строка параметров, но некоторые функции "да/нет" опущены, то предполагается, что пропущенные функции не имеют значения. Поэтому, если вы указываете параметры, убедитесь, что вы явно установили для всех необходимых функций значение yes.
    • Если в параметрах нет значения left/top, браузер пытается открыть новое окно рядом с последним открытым окном.
    • Если ширина/высота отсутствуют, новое окно будет такого же размера, как и последнее открытое.

    Доступ к всплывающему окну из окна

    Вызов open возвращает ссылку на новое окно. Его можно использовать для управления его свойствами, изменения местоположения и многого другого.

    В этом примере мы генерируем всплывающее содержимое из JavaScript:

    А здесь мы изменяем содержимое после загрузки:

    Обратите внимание: сразу после window.open новое окно еще не загружено. Это демонстрируется предупреждением в строке (*). Поэтому мы ждем загрузки, чтобы изменить его. Мы также можем использовать обработчик DOMContentLoaded для newWin.document .

    Windows может свободно получать доступ к содержимому друг друга, только если они исходят из одного и того же источника (один и тот же протокол://домен:порт).

    Доступ к окну из всплывающего окна

    Всплывающее окно также может получить доступ к окну «открывателя», используя ссылку window.opener. Он равен нулю для всех окон, кроме всплывающих окон.

    Если вы запустите приведенный ниже код, он заменит содержимое открывающего (текущего) окна на «Тест»:

    Читайте также: