Il semble difficile d'imaginer une application web qui n'utilise pas l'architecture microfrontend pour pouvoir implémenter une application flexible et fonctionnelle. Et comme dans toute approche architecturale, il est nécessaire de fournir des tests de haute qualité des composants développés dans le microfond.

Mais où cela vaut-il la peine de commencer et qu'est-ce qui attend quiconque se lance dans l'automatisation du microfront, alors que beaucoup ont l'habitude de tester des applications déjà assemblées à partir de pièces?

Hey. Je m'appelle Alexander Vorobei, je suis l'un des principaux spécialistes de l'automatisation des tests à Tinkoff. Dans cet article, je vais essayer de vous expliquer brièvement comment nous avons commencé l'automatisation du microfront, quels problèmes nous avons rencontrés et quels résultats nous avons obtenus.

Cet article est basé sur mon rapport de la conférence de Heisenbug . Il se compose de deux sections:

1. Une histoire sur le sujet des tests et le choix des outils.
2. Automatisation: méthodes, problèmes et leurs solutions.

Ceux qui souhaitent en savoir le plus tôt possible sur les méthodes de test de microfrontend peuvent passer en toute sécurité à la section «Automatisation des tests de microfrontend».

Objet du test

— . .

— , , — . ( ) , . — .

, , , :

• . 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 .