BackstopJS - Установить общий селектор для всех сценариев - PullRequest
Новая
       31

BackstopJS - Установить общий селектор для всех сценариев

0 голосов
/ 18 мая 2018

Я использую BackstopJS для запуска некоторых визуальных регрессионных тестов на некоторых компонентах React.Все мои компоненты отображаются на отдельных страницах сборника рассказов в «обычной» оболочке.

Например, каждый рассказ в сборнике рассказов настроен для отображения следующего: 

<div key="my_unique_key" id="component_preview">
  <MyReactComponentHere />
</div>

Поскольку всемои компоненты отображаются на отдельных страницах изолированно внутри этого общего контейнера с идентификатором component_preview, я хотел бы установить селектор в BackstopJS для всех наборов тестов, чтобы это было фокусом экраназахват для каждого теста (т. е. это так, чтобы я не захватывал таблицы уценки или реквизита, отображаемые с компонентом на каждой странице).

Я знаю, что могу индивидуально установить это в каждом сценарии следующим образом: 

scenarios: [
  {
    ...
    selectors: [
      'div[id="component_preview"]'
    ],
    ...
  }
],

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

IПопытка установить массив selectors вне конфигурации scenarios, но он не дал никакого эффекта.

Возможно ли установить общий селектор, подобный этому, для всех сценариев без необходимостиустановить его индивидуально для каждого сценария?

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

1 Ответ

0 голосов
/ 07 июля 2018

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

Первоначальная цель состояла в том, чтобы захватить мои компоненты React, отображаемые в сборнике рассказов, изолированно (т. Е. Не мешать таблицам уценки или поддержки).

Просто для справки по всем, это соответствующие зависимости и версиичто я использую (скопировал и вставил из моих проектов package.json файл): 

"@storybook/addon-actions": "^3.4.8",
"@storybook/addon-info": "^3.4.8",
"@storybook/addon-links": "^3.4.8",
"@storybook/addon-options": "^3.4.8",
"@storybook/addons": "^3.4.8",
"@storybook/react": "^3.4.8",
"backstopjs": "^3.2.19",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1"

В качестве дальнейшего примечания я использую puppeteer с backstopjs.

Первой проблемой, которую мне пришлось обойти, был тот факт, что Storybook отображает ваш компонент, уценку и таблицы поддержки внутри внутреннего элемента <iframe> на каждой странице.Это вызвало проблему с backstopjs, поскольку область видимости CSS не имела понятия внутреннего document внутри этого внутреннего <iframe>.Если бы мой компонент был больше, чем тот, который был виден в непосредственном пользовательском интерфейсе, он бы не понял, что внутренний document длиннее, чем внешний.В дополнение к этому я не смог установить hideSelectors или removeSelectors для каких-либо компонентов внутри этого внутреннего <iframe>, так как он был вне области видимости.

Итак, первое крупное открытие, которое помоглоизолировать, что внутренний <iframe> на своей собственной странице должен был добавить iframe.html к URL-адресу следующим образом (например - предположим, что вы используете Storybook на localhost через порт по умолчанию): 

http://localhost:6006/iframe.html?selectedKind=...

Это изолирует это ранее внутреннее <iframe> на его собственной странице без появления левой панели меню.Таким образом, теперь я мог скрывать и удалять селекторы так, как хотел, поскольку теперь все было в поле зрения.Уценка Storybook и таблицы поддержки, которые отображаются на странице, удобно заключены в один элемент <div>.Уникальный селектор CSS, который я использовал для указания на этот элемент <div>, выглядит следующим образом: 

div[id="root"] > div > div > div[style*="font-family: -apple-system"]

Итак, вместо того, чтобы настраивать общий селектор для каждого сценария, я решил сделать следующее:чтобы вызвать общий onReadyScript в моем backstop.json файле конфигурации следующим образом: 

{
  "id": "suite_name",
  "viewports": [
    ...
  ],
  "onReadyScript": "my-on-ready-script.js",
  "scenarios": [
    ...
  ],
  ...
}

Мой скрипт был настроен для удаления элемента markdown и prop-tables <div> следующим образом: 

module.exports = async function (puppeteer) {
  /* Remove the markdown and prop tables from the Storybook preview panel */
  await puppeteer
    .$eval('div[id="root"] > div > div > div[style*="font-family: -apple-system"]', (markdownAndPropTables) => {
      markdownAndPropTables.parentNode.remove();
    });
};

Это оставляет мой компонент полностью изолированным на каждой странице, и backstopjs может захватить этот компонент самостоятельно.

Это лучшее решение, которое я когда-либо делалв состоянии найти для достижения моих целей с этим.Я предлагаю это как потенциальное решение для всех остальных.Надеюсь, в этом есть что-то, что поможет кому-то еще, желающему сделать то же самое, что я хотел!

...