Работа с Window объектом

Объект window в контексте браузерного тестирования играет важную роль. В Playwright доступ к объекту window предоставляет множество возможностей для взаимодействия с различными аспектами страницы и её окна. Он позволяет манипулировать элементами окна, работать с событиями, а также взаимодействовать с глобальными объектами JavaScript. В этой главе рассмотрим основные способы работы с объектом window, которые могут быть полезны для написания эффективных тестов.

Основы взаимодействия с объектом window

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

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');

  // Получаем объект window
  const windowHandle = await page.evaluate(() => window);
  
  console.log(windowHandle);
  
  await browser.close();
})();

В примере выше мы используем метод page.evaluate(), чтобы получить доступ к объекту window страницы. Этот метод позволяет выполнять JavaScript код в контексте браузера и возвращать результат в виде данных.

Работа с глобальными объектами

Объект window в браузере содержит ссылки на глобальные объекты, такие как document, localStorage, sessionStorage, а также методы для манипуляции окнами и событиями. Эти глобальные объекты могут быть использованы в тестах для имитации действий пользователя или для проверки состояния страницы.

Пример использования объекта window для доступа к localStorage:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');

  // Сохраняем данные в localStorage
  await page.evaluate(() => {
    localStorage.setItem('user', JSON.stringify({ name: 'John Doe' }));
  });

  // Читаем данные из localStorage
  const user = await page.evaluate(() => {
    return JSON.parse(localStorage.getItem('user'));
  });

  console.log(user); // { name: 'John Doe' }

  await browser.close();
})();

В этом примере используется метод page.evaluate() для записи и чтения данных из localStorage. Взаимодействие с такими объектами позволяет эмулировать сессии пользователей и тестировать работу приложения с сохранёнными данными.

Обработка событий окна

Объект window также предоставляет доступ к множеству событий, таких как изменение размера окна, фокусировка, скроллинг и другие. В Playwright можно подписываться на события окна с помощью JavaScript, используя addEventListener или напрямую через API Playwright.

Пример отслеживания изменения размера окна:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');

  // Слушаем событие resize
  await page.evaluate(() => {
    window.addEventListener('resize', () => {
      console.log('Окно изменило размер!');
    });
  });

  // Принудительно изменим размер окна
  await page.setViewportSize({ width: 1024, height: 768 });

  // Задержка для наблюдения за событием
  await page.waitForTimeout(1000);

  await browser.close();
})();

В этом примере слушатель события resize отслеживает изменение размера окна, что может быть полезно для тестирования адаптивности страницы. Метод page.setViewportSize() используется для изменения размеров окна и вызова события.

Окна и вкладки

В Playwright можно работать с несколькими окнами и вкладками браузера. Каждое окно или вкладка представляет собой отдельный контекст, с которым можно взаимодействовать через объект window. Это особенно важно для тестирования мульти-окружений, таких как открытие модальных окон, переходы между вкладками или окнами.

Пример работы с несколькими окнами:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // Открываем первую страницу
  await page.goto('https://example.com');

  // Открываем новое окно с помощью JavaScript
  await page.evaluate(() => {
    window.open('https://example.com');
  });

  // Переходим ко всем открытым страницам
  const pages = await context.pages();
  console.log(pages.length); // должно быть 2

  await browser.close();
})();

В этом примере мы открываем новое окно с помощью метода window.open() в контексте браузера. В Playwright можно работать с каждым окном через объект page, который будет представлять каждую из вкладок или окон.

Модификация поведения окна

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

Пример изменения размера окна:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');

  // Изменяем размер окна
  await page.setViewportSize({ width: 1280, height: 720 });

  await page.waitForTimeout(1000);

  await browser.close();
})();

Метод page.setViewportSize() позволяет задать фиксированный размер окна для тестирования интерфейсов, которые зависят от размеров окна, таких как мобильные адаптивные версии сайтов.

Заключение

Работа с объектом window в Playwright позволяет эффективно тестировать взаимодействие с окнами браузера, работать с глобальными объектами и событиями, а также моделировать поведение приложения в различных контекстах. Это ключевая часть тестирования, которая даёт тестировщикам инструменты для имитации и контроля за состоянием страницы, а также для взаимодействия с элементами окна браузера.

Оглавление