يبدو أنه من الصعب تخيل تطبيق ويب لا يستخدم بنية microfront ليكون قادرًا على تنفيذ تطبيق مرن وعملي. وكما هو الحال في أي نهج معماري ، من الضروري توفير اختبار عالي الجودة للمكونات المطورة في الميكروفوند.

ولكن أين يستحق الأمر وما الذي ينتظر أي شخص يدخل مسار أتمتة الواجهة الصغيرة ، عندما اعتاد الكثيرون على اختبار التطبيقات التي تم تجميعها بالفعل من القطع؟

مهلا. اسمي ألكسندر فوروبي ، وأنا متخصص رائد في أتمتة الاختبار في تينكوف. في هذه المقالة سأحاول أن أخبرك بإيجاز كيف بدأنا التشغيل الآلي للواجهة المصغرة ، وما هي المشاكل التي واجهناها والنتائج التي حصلنا عليها.

تستند هذه المقالة إلى تقريري من مؤتمر 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 .