Get best of the week

Microfront的自动化，或如何在Tinkoff中测试组件库

似乎很难想象没有使用微前端架构的Web应用程序能够实现灵活而功能强大的应用程序。并且像在任何架构方法中一样，有必要对超细结构中的已开发组件进行高质量的测试。


但是，当许多人用来测试已经由组件组装而成的应用程序时，值得从哪里开始呢？每个人都在等待自动化微型前端的道路吗？



嘿。我叫Alexander Vorobei，我是Tinkoff测试自动化领域的领先专家。在本文中，我将尝试简要地告诉您我们如何开始微型前端的自动化，遇到的问题以及获得的结果。


本文基于Heisenbug会议的报告。它由两部分组成：


  1. 有关测试主题和工具选择的故事。
  2. 自动化：方法，问题及其解决方案。

那些希望尽快了解微前端测试方法的人可以安全地进行“自动化微前端测试”部分。


测试对象


— . .


— , , — . ( ) , . — .



, , , :


  • . F5 — . , .
  • , , .
  • . — , — , — .
  • .

20 ( , ). : , , , . , , Form Builder, . Form Builder



. , — . — , . , , , . .


, . , , , UI.


. — .
:


  1. .
  2. .
  3. .


QA- . , , , - .


, , Storybook.


Storybook:



:


  • Stories — . — Story.
  • , , .
  • Knobs — props, live- , .
  • — , , .

:


  • , (, , -, , ) , .
  • , , , .
  • . .


:


  • , — Puppeteer, WebdriverIO ( wdio). Wdio Firefox, Safari IE 11.
  • Allure Report.
  • .

CodeceptJS. , , — Puppeteer, WebDriverIO, Appium Playwright, — .


:


Scenario('   ,   ', async (I) => {
  await I.amOnStory(stories('url'))

  await I.fillField(' ', '01.01.1990')
  await I.fillField('   ', '1111111111')
  await I.fillField('   ', '01.01.2008')
  await I.fillField('   ', '2008')

  await I.clearFieldBySymbols(' ', 1)
  await I.appendFieldManual(' ', '9')

  await I.seeFieldErrorMessage('   ')
  await I.seeFieldErrorMessage('   ')
})

, . Allure-, , , .


?


  • Cypress. , , Cypress , ( ).
  • Wdio. -, , Wdio . -, — , . «» .
  • Puppeteer. , . , Wdio, Puppeteer.

CodeceptJS.



, CI/CD Gitlab, -, Gitlab, .


, , , -.



, , .


? , . , , , . , , . , .


, , -. , , -, , .



— . — !



:


  • . — .
  • Form Builder` ( , ).
  • . .
  • .

.



, , , .


, , — .


- , : , , -, . , , (), , , .


, LFS. , , , - ( ) , , . , .


Storybook, . Storybook:


  • Master Storybook — Storybook , . .
  • Merge Request Storybook — Storybook .
    Master Storybook , . git .

, , , , API — window.__STORYBOOK_CLIENT_API.getStorybook(). API , . , . nodejs API .


:


const html = fs.readFileSync(`${normalizedPath}/iframe.html`, { encoding: 'utf8' });
const htmlDom = new JSDOM(html);
const scripts = htmlDom.window.document.querySelectorAll('script');
scripts.forEach((script) => {
  if (script.src && script.src.endsWith('bundle.js')) {
    require(path.resolve(normalizedPath, script.src));
  }
});
window.__STORYBOOK_CLIENT_API__.getStorybook().forEach((story) => {...})

— js-, require js- node, node API .


, .

, CodeceptJS, :


. :


  • .
  • .
  • ().
  • .
  • .

. .
— .


:


42 3 . , !


, 2 14 . , .


API , — window.__STORYBOOK_CLIENT_API__._storyStore.setSelection(). , id, — .


, — , 3 , 554 :


:


  • . — .
  • .
  • !

Form Builder`


, 20+ . - Form Builder , Form Builder . Form Builder.


:


  • git- ;
  • yarn.

, git clone. yarn link form-builder From Builder, . Happy-path .


Form Builder, , .



From Builder jobs 30 , 50 . , , .


, , , — (Puppeteer Wdio). , karma.


?


Puppeteer Wdio CDP (Chrome DevTools Protocol) WebDriver Protocol . Puppeteer type, API. : "Sends a keydown, keypress/input, and keyup event for each character in the text". Puppeteer DevTools . , - .


( karma) :


  • index.html (, webpack ).
  • , localhost.
  • localhost, , .
  • Web API.

Form Builder karma, 70 3 366 50 .


:

:


:


  • DOM (Web API), , Puppeteer Wdio.
  • (). , .
  • . ? .
  • — .
  • . dispatch- .

, .



, , — .


- , , . , 1000 , -, , - . .


, lerna, , , , . , .


:


  • .
  • -, .
  • - .
  • , -, - , 100% .
    — , unit-.

:


  • — .
  • — .


:


  • .
  • .
  • - — .
  • .
  • , Puppeteer Playwright.
  • core .

More articles:


All Articles