Parece difícil imaginar una aplicación web que no utilice la arquitectura de microfronte para poder implementar una aplicación flexible y funcional. Y como en cualquier enfoque arquitectónico, es necesario proporcionar pruebas de alta calidad de los componentes desarrollados en el microfrond.

Pero, ¿dónde vale la pena comenzar y qué les espera a todos los que entran en el camino de la automatización del microfront, cuando muchos están acostumbrados a probar aplicaciones ya ensambladas a partir de piezas?

Oye. Mi nombre es Alexander Vorobei, soy un especialista líder en automatización de pruebas en Tinkoff. En este artículo, trataré de contarles brevemente cómo comenzamos la automatización del microfront, qué problemas encontramos y qué resultados obtuvimos.

Este artículo se basa en mi informe de la Conferencia de Heisenbug . Consta de dos secciones:

1. Una historia sobre el tema de las pruebas y la elección de herramientas.
2. Automatización: métodos, problemas y sus soluciones.

Aquellos que quieran aprender sobre los métodos de prueba de microfronte lo antes posible pueden pasar de manera segura a la sección "Automatización de pruebas de microfronte".

Objeto de prueba

— . .

— , , — . ( ) , . — .

, , , :

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