Как проверить модальность начальной загрузки в CSS Регрессионное тестирование backstopjs

Question

Я пытаюсь смоделировать нажатие элементов CSS на моей странице и автоматически делать скриншоты окна на каждом этапе для целей тестирования. Я использую backstopJS в качестве фреймворка CSS для тестирования / скриншотов. Кажется, все работает нормально для этого первого элемента. Модальный режим запускается, когда я нажимаю на ссылку регистрации в главном меню заголовка. но это не генерирует никакого справочного скриншота модального.

Пожалуйста, помогите вызвать скриншот ссылки модального в приведенном ниже скрипте

Это скрипт:

{
  "viewports": [
    {
      "name": "desktop",
      "width": 1600,
      "height": 900
    },
    {
      "name": "phone",
      "width": 320,
      "height": 480
    },
    {
      "name": "tablet_v",
      "width": 568,
      "height": 1024
    },
    {
      "name": "tablet_h",
      "width": 1024,
      "height": 768
    }
  ],
  "grabConfigs" : [
    {
      "testName":"vawizard"
      ,"url":"http://localhost/vawizard/index.html"
      ,"hideSelectors": [

      ]

      ,"removeSelectors": [
        "header.banner--clone"
      ]
      ,"selectors":[
        "#outer_wrapper header"
        ,".banner_box"
        ,".help_desk"
        ,".big_search_box"
        ,".look_specific"
        ,".smart_tool_box"
        ,"footer"
        ,".copyright_box"
      ]
    }
  ]
}

Это ссылка http://wizard.hodgesdigital.com/

Есть идеи, что может быть причиной такого поведения?

Answer 1

BackstopJS в основном сосредоточен на тестировании состояний макетов на экранах разных размеров и не поддерживает тестирование пользовательских взаимодействий.

В вашем случае я могу сделать две рекомендации. 1) Вы можете добавить состояние к вашему URL, которое запускает модальный режим при загрузке вашей страницы, ИЛИ 2) вы можете написать собственный скрипт CasperJS для таких тестовых случаев, которые требуют некоторого взаимодействия с пользователем. Более подробно ниже...

Подход 1: В первом случае вы можете добавить хеш к вашему URL, который вызовет ваш модальный режим. По моему опыту, веб-приложения (например, Angular и Ember) обычно представляют модальные состояния таким образом....

// in your BackstopJS config
"url": "http://localhost/vawizard/index.html#openModal",


// then as part of a jQuery script
$(document).ready(function(){
  if ( /openModal/.test(location.hash) )
    {
      // Do your open modal action here
      // Then trigger BackstopJS
    }
});

Подход 2: Если вышесказанное не ваш стиль, есть еще один хороший вариант. В рамках установки BackstopJS у вас также есть полная версия CasperJS - поэтому я бы порекомендовал перейти на CasperJS.org, чтобы взглянуть на некоторые базовые примеры и посмотреть, имеет ли смысл писать свои собственные скрипты. В краткосрочной перспективе это займет немного больше времени, но шаблон для конкретного проекта, который вы пишете сейчас, может быть полезен для будущих крайних случаев (для тестирования форм, других взаимодействий и т. Д.).

Answer 2

Для таких вещей мы используем собственные скрипты. например

      module.exports = async(page, scenario, vp) => {
  await require('./onReadyInfo')(page, scenario, vp);
  await require('./clickAndHoverHelper')(page, scenario, vp);
  await require('./onReadyWaitForImages')(page, scenario, vp);

  await page.waitForSelector("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
  await page.click("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
  await page.waitForSelector(
    "#checkbox-twitter", {
      timeout: 6000
    }
  );
  await page.waitForTimeout(500);
  await page.evaluate(async() => {
    jQuery("#checkbox-twitter + label").click();
    setTimeout(() => {
      jQuery('#checkbox-twitter + label').focus()
    }, 500);
  });
  await new Promise(resolve => setTimeout(resolve, 300));
};

При нажатии на ссылку откроется диалоговое окно, установите флажок и выделите ярлык.