viewport

Управляйте размером и ориентацией экрана для вашего приложения.

Вы можете установить ширину и высоту viewport глобально, определив viewportWidth и viewportHeight в настройках.

Синтаксис

cy.viewport(width, height)
cy.viewport(preset, orientation)
cy.viewport(width, height, options)
cy.viewport(preset, orientation, options)

Использование

Правильное использование

cy.viewport(550, 750) // Set viewport to 550px x 750px
cy.viewport('iphone-6') // Set viewport to 375px x 667px

Аргументы

width (Число)

Ширина viewport в пикселях (должно быть неотрицательным, конечным числом).

height (Число)

Высота viewport в пикселях (должно быть неотрицательным, конечным числом).

preset (Строка)

Предустановленные размеры для установки viewport. Предустановки поддерживают следующие варианты:

orientation (Строка)

Ориентация экрана. По умолчанию ориентация - portrait. Передайте landscape в качестве ориентации, чтобы изменить ширину/высоту.

options (Объект)

Передайте объект options, чтобы изменить поведение по умолчанию cy.viewport().

Возвращаемые значения

• cy.viewport() возвращает null .
• cy.viewport() нельзя использовать дальше в цепочке.

Примеры

Ширина, Высота

Изменение размера viewport на 1024px x 768px

cy.viewport(1024, 768)

Организация тестов для настольных и мобильных устройств отдельно

describe('Nav Menus', () => {
  context('720p resolution', () => {
    beforeEach(() => {
      // run these tests as if in a desktop
      // browser with a 720p monitor
      cy.viewport(1280, 720)
    })

    it('displays full header', () => {
      cy.get('nav .desktop-menu').should('be.visible')
      cy.get('nav .mobile-menu').should('not.be.visible')
    })
  })

  context('iphone-5 resolution', () => {
    beforeEach(() => {
      // run these tests as if in a mobile browser
      // and ensure our responsive UI is correct
      cy.viewport('iphone-5')
    })

    it('displays mobile menu on click', () => {
      cy.get('nav .desktop-menu').should('not.be.visible')
      cy.get('nav .mobile-menu')
        .should('be.visible')
        .find('i.hamburger')
        .click()

      cy.get('ul.slideout-menu').should('be.visible')
    })
  })
})

Динамическое тестирование нескольких viewport

const sizes = ['iphone-6', 'ipad-2', [1024, 768]]

describe('Logo', () => {
  sizes.forEach((size) => {
    // make assertions on the logo using
    // an array of different viewports
    it(`Should display logo on ${size} screen`, () => {
      if (Cypress._.isArray(size)) {
        cy.viewport(size[0], size[1])
      } else {
        cy.viewport(size)
      }

      cy.visit('https://www.cypress.io')
      cy.get('#logo').should('be.visible')
    })
  })
})

Предустановки

Изменение размера viewport на ширину и высоту iPhone 6

cy.viewport('iphone-6') // viewport will change to 414px x 736px

Ориентация

Изменение ориентации на альбомную

// the viewport will now be changed to 736px x 414px
// and simulates the user holding the iPhone in landscape
cy.viewport('iphone-6', 'landscape')

Примечания

devicePixelRatio

devicePixelRatio не эмулируется

Следуйте #7075, если вам нужна поддержка.

Восстановление

Cypress восстановит viewport в снимке

При наведении курсора на каждую команду Cypress автоматически отобразит снимок в размерах viewport, которые были в момент выполнения команды.

Значения по умолчанию

Размеры по умолчанию

По умолчанию, пока вы не выполните команду cy.viewport(), Cypress устанавливает ширину по умолчанию в 1000px и высоту в 660px.

Вы можете изменить эти значения по умолчанию, добавив следующее в ваш файл конфигурации (по умолчанию cypress.json):

{
  "viewportWidth": 1000,
  "viewportHeight": 660
}

Кроме того, Cypress автоматически устанавливает viewport в размер по умолчанию между каждым тестом.

Масштабирование

Автоматическое масштабирование

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

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

Преимущества заключаются в том, что тесты должны успешно проходить или завершаться неудачей независимо от размера экрана разработчика. Тесты также будут выполняться последовательно в CI, потому что все viewports будут одинаковыми независимо от того, на какой машине работает Cypress.

Сброс viewport через Cypress.config()

Вы можете изменить размер viewport (высоту и ширину) для оставшейся части тестов, установив новые значения для viewportHeight или viewportWidth в Cypress.config().

Cypress.config('viewportWidth', 800)
Cypress.config('viewportWidth') // => 800

Установить viewport в настройках теста

Вы можете настроить размер viewport (высоту и ширину) в рамках набора или теста, передав новое значение конфигурации в настройках теста.

Это установит высоту и ширину на весь период выполнения тестов, а затем вернет их к значениям по умолчанию viewportHeight и viewportWidth по завершении.

describe(
  'page display on medium size screen',
  {
    viewportHeight: 1000,
    viewportWidth: 400,
  },
  () => {
    it('does not display sidebar', () => {
      cy.get('#sidebar').should('not.be.visible')
    })

    it('shows hamburger menu', () => {
      cy.get('#header').find('i.menu').should('be.visible')
    })
  }
)

Правила

Требования

• cy.viewport() требует цепочки с команды cy .

Утверждения

• cy.viewport() не может содержать цепочку утверждений.

Таймауты

• cy.viewport() не может иметь таймауты.

Журнал команд

Изменение размера viewport для тестирования адаптивного навигационного меню

cy.get('#navbar').should('be.visible')

cy.viewport(320, 480)

// the navbar should have collapse since our screen is smaller
cy.get('#navbar').should('not.be.visible')
cy.get('.navbar-toggle').should('be.visible').click()
cy.get('.nav').find('a').should('be.visible')

Вышеуказанные команды отобразятся в журнале команд как:

При нажатии на viewport в журнале команд консоль выведет следующее:

История

См. также

• Прочитайте блог-пост Используйте осмысленные тесты на работоспособность, где мы выполняем один и тот же тест с разными разрешениями viewport
• Прочитайте блог-пост Генерация видео и скриншотов высокого разрешения, чтобы узнать, как изменить размер окна браузера для захвата скриншотов и видео с большей детализацией
• Конфигурация
• Cypress.config()