एक वेब एप्लिकेशन की कल्पना करना कठिन लगता है जो एक लचीले और कार्यात्मक एप्लिकेशन को लागू करने में सक्षम होने के लिए माइक्रोफ्रेन्ड आर्किटेक्चर का उपयोग नहीं करता है। और किसी भी वास्तुशिल्प दृष्टिकोण के रूप में, माइक्रोफ़्रोन्ड में विकसित घटकों के उच्च-गुणवत्ता वाले परीक्षण प्रदान करना आवश्यक है।

लेकिन यह कहां से शुरू होने लायक है और हर किसी को इंतजार है, जो माइक्रोफ्लोरेट को स्वचालित करने के रास्ते में प्रवेश करता है, जब कई का उपयोग टुकड़ों से पहले से इकट्ठे किए गए अनुप्रयोगों के परीक्षण के लिए किया जाता है?

अरे। मेरा नाम अलेक्जेंडर वोरोबी है, मैं टिंकॉफ में परीक्षण स्वचालन में एक प्रमुख विशेषज्ञ हूं। इस लेख में मैं आपको संक्षेप में बताने की कोशिश करूँगा कि हमने माइक्रोफ़ोर्स का स्वचालन कैसे शुरू किया, हमें किन समस्याओं का सामना करना पड़ा और हमें क्या परिणाम मिले।

यह लेख हाइजेनबग सम्मेलन की मेरी रिपोर्ट पर आधारित है । इसमें दो खंड होते हैं:

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 .