{"id":110922,"date":"2025-05-28T11:24:19","date_gmt":"2025-05-28T06:54:19","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/"},"modified":"2025-05-28T11:24:19","modified_gmt":"2025-05-28T06:54:19","slug":"%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/","title":{"rendered":"\ud83c\udfd7 \u0633\u0627\u062e\u062a \u0686\u0627\u0631\u0686\u0648\u0628 \u0646\u0645\u0627\u06cc\u0634\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 &#8211; \u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a"},"content":{"rendered":"<div data-article-id=\"2513786\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%F0%9F%8E%AF_%D8%A7%D9%87%D9%85%DB%8C%D8%AA_%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C\" >\ud83c\udfaf \u0627\u0647\u0645\u06cc\u062a \u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%F0%9F%9A%80_%DA%86%D8%B1%D8%A7_%D8%A7%D9%84%DA%AF%D9%88%D9%87%D8%A7%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%A7%D9%87%D9%85%DB%8C%D8%AA_%D8%AF%D8%A7%D8%B1%D9%86%D8%AF\" >\ud83d\ude80 \u0686\u0631\u0627 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0627\u0647\u0645\u06cc\u062a \u062f\u0627\u0631\u0646\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%F0%9F%A4%94_POM_%D9%85%D8%AF%D9%84_%D8%B4%DB%8C%D8%A1_%D8%B5%D9%81%D8%AD%D9%87_%D8%AF%D8%B1_%D9%85%D9%82%D8%A7%D8%A8%D9%84_%DB%8C%D8%A7%D8%B1%D8%A7%D9%86_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\" >\ud83e\udd14 POM (\u0645\u062f\u0644 \u0634\u06cc\u0621 \u0635\u0641\u062d\u0647) \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%F0%9F%8F%9B_%D9%85%D8%AF%D9%84_%D8%B4%DB%8C%D8%A1_%D8%B5%D9%81%D8%AD%D9%87_POM\" >\ud83c\udfdb \u0645\u062f\u0644 \u0634\u06cc\u0621 \u0635\u0641\u062d\u0647 (POM)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%E2%9A%99_%DB%8C%D8%A7%D8%B1%D8%A7%D9%86_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\" >\u2699 \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%F0%9F%8E%AF_%DA%A9%D8%AF%D8%A7%D9%85_%DB%8C%DA%A9_%D8%B1%D8%A7_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F\" >\ud83c\udfaf \u06a9\u062f\u0627\u0645 \u06cc\u06a9 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\u061f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%F0%9F%9B%A0_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_POM\" >\ud83d\udee0 \u062a\u0646\u0638\u06cc\u0645 POM<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%BE%D9%88%D8%B4%D9%87_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%B4%DB%8C%D8%A1_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0634\u06cc\u0621 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%DA%A9%D9%84%D8%A7%D8%B3%D9%87%D8%A7%DB%8C_%D8%B4%DB%8C%D8%A1_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc \u0634\u06cc\u0621 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%f0%9f%8f%97-%d8%b3%d8%a7%d8%ae%d8%aa-%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%86%d9%85%d8%a7%db%8c%d8%b4%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%af%d8%a7%d9%85-%d8%a8%d9%87-%da%af\/#%F0%9F%8E%AF_%D8%A8%D8%B9%D8%AF%DB%8C_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\ud83c\udfaf \u0628\u0639\u062f\u06cc \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%AF_%D8%A7%D9%87%D9%85%DB%8C%D8%AA_%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C\"><\/span>\n<p>  \ud83c\udfaf \u0627\u0647\u0645\u06cc\u062a \u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0647\u0645\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u062f\u0631 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u062a\u0633\u062a \u0642\u0627\u0628\u0644 \u062a\u062d\u0645\u0644 \u0646\u06cc\u0633\u062a! \u0627\u06cc\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062e\u062f\u0645\u062a \u0645\u06cc \u06a9\u0646\u062f <strong>\u0637\u0631\u062d \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u062a\u0639\u0627\u0645\u0644<\/strong> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u0631\u0648\u0634\u06cc \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f. \ud83c\udfad<\/p>\n<blockquote>\n<p>\ud83d\udca1 <strong>\u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc \u0686\u06cc\u0633\u062a\u061f<\/strong> \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0627\u062b\u0628\u0627\u062a \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0645\u0634\u06a9\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u06a9\u0647 \u0627\u0644\u06af\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0686\u06af\u0648\u0646\u06af\u06cc \u062d\u0644 \u0645\u0634\u06a9\u0644\u0627\u062a \u062f\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%9A%80_%DA%86%D8%B1%D8%A7_%D8%A7%D9%84%DA%AF%D9%88%D9%87%D8%A7%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%A7%D9%87%D9%85%DB%8C%D8%AA_%D8%AF%D8%A7%D8%B1%D9%86%D8%AF\"><\/span>\n<p>  \ud83d\ude80 \u0686\u0631\u0627 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0627\u0647\u0645\u06cc\u062a \u062f\u0627\u0631\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0686\u0646\u062f\u06cc\u0646 \u0645\u0632\u06cc\u062a \u0645\u0647\u0645 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\ud83d\udd27 <strong>\u0642\u0627\u0628\u0644\u06cc\u062a \u062d\u0641\u0638 \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a\u0647<\/strong> &#8211; \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u0645\u0631\u06a9\u0632 UI \u0645\u062f\u06cc\u0631\u06cc\u062a<\/li>\n<li>\ud83d\udcd6 <strong>\u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647<\/strong> &#8211; \u067e\u0627\u06a9 \u06a9\u0646\u0646\u062f\u0647 \u060c \u06a9\u062f \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631<\/li>\n<li>\ud83d\udd04 <strong>\u06a9\u0627\u0647\u0634 \u062a\u06a9\u062b\u06cc\u0631 \u06a9\u062f<\/strong> &#8211; \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<\/li>\n<li>\ud83c\udfd7 <strong>\u0633\u0627\u062e\u062a\u0627\u0631 \u0628\u0647\u062a\u0631<\/strong> &#8211; \u0645\u0639\u0645\u0627\u0631\u06cc \u0633\u0627\u0632\u0645\u0627\u0646 \u06cc\u0627\u0641\u062a\u0647 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631<\/li>\n<li>\ud83d\udee1 <strong>\u0627\u0633\u062a\u062d\u06a9\u0627\u0645 \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0633\u062a<\/strong> &#8211; \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u062a\u0633\u062a \u0642\u0627\u0628\u0644 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062a\u0631<\/li>\n<\/ul>\n<p>\u0628\u0627 \u0627\u0646\u062a\u0632\u0627\u0639 \u0633\u0627\u062e\u062a\u0627\u0631 UI \u0628\u0647 \u062f\u0648\u0631 \u0627\u0632 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627\u06cc \u0622\u0632\u0645\u0648\u0646 \u060c \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u06a9\u062f \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631\u06cc \u0628\u0646\u0648\u06cc\u0633\u0646\u062f. \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 UI \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0631\u0648\u0634\u06cc \u0645\u062a\u0645\u0631\u06a9\u0632 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0631\u062f \u0648 \u062a\u0623\u062b\u06cc\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0631 \u062a\u0633\u062a \u0647\u0627 \u0648 \u0628\u0647\u0628\u0648\u062f \u0627\u0633\u062a\u062d\u06a9\u0627\u0645 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0645\u06cc \u0631\u0633\u0627\u0646\u062f.<\/p>\n<blockquote>\n<p>\u26a1 <strong>\u0646\u062a\u06cc\u062c\u0647<\/strong>: \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u0647\u0627\u06cc \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u062a\u0633\u062a \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u062a\u0631 \u060c \u0642\u0627\u0628\u0644 \u062d\u0641\u0638 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u062a\u0631 \u06a9\u0647 \u0628\u0627 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0647\u0645\u0627\u0647\u0646\u06af \u0627\u0633\u062a<\/p>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%A4%94_POM_%D9%85%D8%AF%D9%84_%D8%B4%DB%8C%D8%A1_%D8%B5%D9%81%D8%AD%D9%87_%D8%AF%D8%B1_%D9%85%D9%82%D8%A7%D8%A8%D9%84_%DB%8C%D8%A7%D8%B1%D8%A7%D9%86_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\"><\/span>\n<p>  \ud83e\udd14 POM (\u0645\u062f\u0644 \u0634\u06cc\u0621 \u0635\u0641\u062d\u0647) \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0631 \u062f\u0648 <strong>\u0645\u062f\u0644 \u0634\u06cc\u0621 \u0635\u0641\u062d\u0647 (POM)<\/strong> \u0648\u062a <strong>\u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/strong> \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u062a\u0642\u0648\u06cc\u062a \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u062a\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0641\u0627\u0648\u062a \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8F%9B_%D9%85%D8%AF%D9%84_%D8%B4%DB%8C%D8%A1_%D8%B5%D9%81%D8%AD%D9%87_POM\"><\/span>\n<p>  \ud83c\udfdb \u0645\u062f\u0644 \u0634\u06cc\u0621 \u0635\u0641\u062d\u0647 (POM)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"table-wrapper-paragraph\">\n<table>\n<thead>\n<tr>\n<th>\u062c\u0646\u0628\u0647<\/th>\n<th>\u0634\u0631\u062d<\/th>\n<th>\u0641\u0648\u0627\u06cc\u062f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>\ud83c\udfd7 \u0633\u0627\u062e\u062a\u0627\u0631<\/strong><\/td>\n<td>\u0639\u0646\u0627\u0635\u0631 UI \u0648\u0628 \u0631\u0627 \u062f\u0631 \u0627\u0634\u06cc\u0627\u0621 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0635\u0641\u062d\u0627\u062a\/\u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/td>\n<td>\u0633\u0627\u0632\u0645\u0627\u0646 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0635\u0641\u062d\u0647<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud83d\udd27 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc<\/strong><\/td>\n<td>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a UI \u0631\u0627 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/td>\n<td>\u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0633\u0627\u0646 \u0627\u0633\u062a<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud83d\udcd6 \u0642\u0627\u0628\u0644\u06cc\u062a \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc<\/strong><\/td>\n<td>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc UI \u0686\u06a9\u06cc\u062f\u0647 \u062f\u0631 \u0631\u0648\u0634 \u0647\u0627 \u060c \u0648 \u062a\u0633\u062a \u0647\u0627 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u062f\u0627\u0633\u062a\u0627\u0646\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u062e\u0648\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f<\/td>\n<td>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627\u06cc \u062a\u0633\u062a \u0628\u0633\u06cc\u0627\u0631 \u0642\u0627\u0628\u0644 \u062e\u0648\u0627\u0646\u062f\u0646<\/td>\n<\/tr>\n<tr>\n<td><strong>\u267b \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<\/strong><\/td>\n<td>\u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0627\u0644\u0627 \u062f\u0631 \u062a\u0633\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u0647\u0645\u0627\u0646 \u0635\u0641\u062d\u0647\/\u0645\u0624\u0644\u0641\u0647<\/td>\n<td>\u062d\u062f\u0627\u06a9\u062b\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u06a9\u062f<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud83d\udcda \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc<\/strong><\/td>\n<td>\u0628\u0647 \u062f\u0644\u06cc\u0644 \u0637\u0631\u0627\u062d\u06cc \u0644\u0627\u06cc\u0647 \u0634\u06cc\u0621 \u0635\u0641\u062d\u0647 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u0646\u062f\u062a\u0631<\/td>\n<td>\u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u062f\u0627\u0631\u062f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%E2%9A%99_%DB%8C%D8%A7%D8%B1%D8%A7%D9%86_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C\"><\/span>\n<p>  \u2699 \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"table-wrapper-paragraph\">\n<table>\n<thead>\n<tr>\n<th>\u062c\u0646\u0628\u0647<\/th>\n<th>\u0634\u0631\u062d<\/th>\n<th>\u0641\u0648\u0627\u06cc\u062f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>\ud83c\udfd7 \u0633\u0627\u062e\u062a\u0627\u0631<\/strong><\/td>\n<td>\u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9 \u0628\u062f\u0648\u0646 \u0627\u062a\u0635\u0627\u0644 \u062f\u0642\u06cc\u0642 \u0635\u0641\u062d\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f<\/td>\n<td>\u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud83d\udd27 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc<\/strong><\/td>\n<td>\u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u060c \u0628\u0647 \u0686\u0627\u0644\u0634 \u06a9\u0634\u06cc\u062f\u0647 \u0628\u0631\u0627\u06cc \u0633\u0648\u0626\u06cc\u062a \u0647\u0627\u06cc \u0628\u0632\u0631\u06af<\/td>\n<td>\u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u06a9\u0648\u0686\u06a9<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud83d\udcd6 \u0642\u0627\u0628\u0644\u06cc\u062a \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc<\/strong><\/td>\n<td>\u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0628\u0647\u062a\u0631 \u060c \u0645\u0634\u062e\u0635\u0627\u062a UI \u0631\u0627 \u062f\u0631 \u062a\u0648\u0627\u0628\u0639 \u0627\u0646\u062a\u0632\u0627\u0639 \u0645\u06cc \u06a9\u0646\u062f<\/td>\n<td>\u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u062e\u0648\u0628 \u0628\u0627 \u062a\u0648\u0627\u0628\u0639<\/td>\n<\/tr>\n<tr>\n<td><strong>\u267b \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<\/strong><\/td>\n<td>\u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0645\u062a\u0648\u0633\u0637 \u200b\u200b\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0639\u062f\u06cc\u0644 \u062f\u0631 \u0645\u062a\u0646 \u0647\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f<\/td>\n<td>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u0645\u062a\u0646 \u0645\u062a\u0642\u0627\u0637\u0639 \u0645\u062d\u062f\u0648\u062f<\/td>\n<\/tr>\n<tr>\n<td><strong>\ud83d\udcda \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc<\/strong><\/td>\n<td>\u062a\u0646\u0638\u06cc\u0645 \u0627\u0648\u0644\u06cc\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u060c \u0634\u0647\u0648\u062f\u06cc \u062a\u0631 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0633\u0627\u062f\u0647<\/td>\n<td>\u0633\u0631\u06cc\u0639 \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8E%AF_%DA%A9%D8%AF%D8%A7%D9%85_%DB%8C%DA%A9_%D8%B1%D8%A7_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF%D8%9F\"><\/span>\n<p>  \ud83c\udfaf \u06a9\u062f\u0627\u0645 \u06cc\u06a9 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<blockquote>\n<p>\ud83d\udca1 <strong>\u0639\u0648\u0627\u0645\u0644 \u062a\u0635\u0645\u06cc\u0645 \u06af\u06cc\u0631\u06cc<\/strong>:<\/p>\n<ul>\n<li>\n<strong>\u0645\u0642\u06cc\u0627\u0633 \u067e\u0631\u0648\u0698\u0647<\/strong>: \u0628\u0632\u0631\u06af\/\u067e\u06cc\u0686\u06cc\u062f\u0647 \u2192 POM \u060c \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0648\u0686\u06a9\/\u0633\u0627\u062f\u0647 \u2192 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/li>\n<li>\n<strong>\u062a\u062c\u0631\u0628\u0647 \u062a\u06cc\u0645\u06cc<\/strong>: \u0628\u0627 \u062a\u062c\u0631\u0628\u0647 \u2192 POM \u060c \u0645\u0628\u062a\u062f\u06cc\u0627\u0646 \u2192 \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\n<\/li>\n<li>\n<strong>\u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc UI<\/strong>: \u067e\u06cc\u0686\u06cc\u062f\u0647\/\u062f\u0631 \u062d\u0627\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u2192 POM \u060c \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9\/\u0633\u0627\u062f\u0647 \u2192 \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/li>\n<li>\n<strong>\u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0637\u0648\u0644\u0627\u0646\u06cc \u0645\u062f\u062a<\/strong>: \u0628\u0644\u0646\u062f \u0645\u062f\u062a \u2192 POM \u060c \u06a9\u0648\u062a\u0627\u0647 \u0645\u062f\u062a \u06cc\u0627 \u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/li>\n<\/ul>\n<\/blockquote>\n<p><strong>\u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647<\/strong>: \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0633\u0631\u06cc \u060c \u0645\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <strong>\u067e\u0648\u0645<\/strong> \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u0645\u062d\u0628\u0648\u0628 \u062a\u0631 \u0627\u0633\u062a \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u06cc \u0628\u0647\u062a\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%9B%A0_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_POM\"><\/span>\n<p>  \ud83d\udee0 \u062a\u0646\u0638\u06cc\u0645 POM<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0633 \u0627\u0632 <strong>\u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc POM<\/strong> \u0645\u062d\u0628\u0648\u0628 \u062a\u0631 \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u062a\u0631 \u0627\u0633\u062a \u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0686\u0646\u062f\u06cc\u0646 \u0627\u062c\u0631\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u060c \u0627\u0645\u0627 \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0645 <strong>\u062f\u0648 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0624\u062b\u0631<\/strong>\u0628\u0634\u0631<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%BE%D9%88%D8%B4%D9%87_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0645\u0646\u0637\u0642\u06cc \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u0627\u0635\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>project-root\/\n\u251c\u2500\u2500 pages\/\n\u2502   \u2514\u2500\u2500 clientSite\/\n\u2502       \u251c\u2500\u2500 HomePage.ts\n\u2502       \u251c\u2500\u2500 NavPage.ts\n\u2502       \u2514\u2500\u2500 ArticlePage.ts\n\u251c\u2500\u2500 tests\/\n\u2514\u2500\u2500 playwright.config.ts\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\ud83c\udfd7 <strong>\u0686\u0631\u0627 \u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631\u061f<\/strong>: \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0639\u062f\u0627\u064b \u0628\u0627 \u067e\u0627\u0646\u0644 \u0645\u062f\u06cc\u0631 \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u0628\u062e\u0634 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u062f<\/p>\n<\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%B4%DB%8C%D8%A1_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0634\u06cc\u0621 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0634\u06cc\u0627\u0621 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u0647 \u0635\u0641\u062d\u0627\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc\u062c\u0627\u062f \u0648 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f. \u0645\u0627 \u0627\u0634\u06cc\u0627\u0621 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc:<\/p>\n<ul>\n<li>\ud83c\udfe0 <strong>\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/strong> &#8211; \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f<\/li>\n<li>\ud83e\udded <strong>\u0635\u0641\u062d\u0647 \u0646\u0627\u0648<\/strong> &#8211; \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc (\u062f\u0631 \u0647\u0631 \u0635\u0641\u062d\u0647 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a \u060c \u0627\u0645\u0627 \u06cc\u06a9 \u0628\u0627\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a)<\/li>\n<li>\ud83d\udcc4 <strong>\u0635\u0641\u062d\u0647 \u0645\u0642\u0627\u0644\u0647<\/strong> &#8211; \u0627\u06cc\u062c\u0627\u062f \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0642\u0627\u0644\u0647<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%DA%A9%D9%84%D8%A7%D8%B3%D9%87%D8%A7%DB%8C_%D8%B4%DB%8C%D8%A1_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc \u0634\u06cc\u0621 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<blockquote>\n<p>\ud83d\udcda <strong>\u0627\u062c\u0631\u0627\u06cc \u06a9\u0627\u0645\u0644<\/strong>: \u0627\u0634\u06cc\u0627\u0621 \u0633\u0647 \u0635\u0641\u062d\u0647 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631 \u0645\u062e\u0632\u0646 GitHub \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0646\u062f<\/p>\n<\/blockquote>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 <strong>\u0635\u0641\u062d\u0647 \u0645\u0642\u0627\u0644\u0647<\/strong> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0627\u0635\u0644\u06cc \u0645\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Page<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Locator<\/span><span class=\"p\">,<\/span> <span class=\"nx\">expect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@playwright\/test<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"cm\">\/**\n * This is the page object for Article Page functionality.\n * @export\n * @class ArticlePage\n * @typedef {ArticlePage}\n *\/<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">ArticlePage<\/span> <span class=\"p\">{<\/span>\n\n    <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">page<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Page<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n    <span class=\"kd\">get<\/span> <span class=\"nf\">articleTitleInput<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Article Title<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});}<\/span>\n    <span class=\"kd\">get<\/span> <span class=\"nf\">articleDescriptionInput<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">What's this article about?<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});}<\/span>\n    <span class=\"kd\">get<\/span> <span class=\"nf\">articleBodyInput<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Write your article (in<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});}<\/span>\n    <span class=\"kd\">get<\/span> <span class=\"nf\">articleTagInput<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter tags<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});}<\/span>\n    <span class=\"kd\">get<\/span> <span class=\"nf\">publishArticleButton<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Publish Article<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});}<\/span>\n    <span class=\"kd\">get<\/span> <span class=\"nf\">publishErrorMessage<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByText<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">title can't be blank<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);}<\/span>\n    <span class=\"kd\">get<\/span> <span class=\"nf\">editArticleButton<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">link<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\uf2bf Edit Article<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">first<\/span><span class=\"p\">();}<\/span>\n    <span class=\"kd\">get<\/span> <span class=\"nf\">deleteArticleButton<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\uf252 Delete Article<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">first<\/span><span class=\"p\">();}<\/span>\n\n    <span class=\"cm\">\/**\n     * Navigates to the edit article page by clicking the edit button.\n     * Waits for the page to reach a network idle state after navigation.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">navigateToEditArticlePage<\/span><span class=\"p\">():<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">editArticleButton<\/span><span class=\"p\">.<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitForResponse<\/span><span class=\"p\">(<\/span>\n            <span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">url<\/span><span class=\"p\">().<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/articles\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">request<\/span><span class=\"p\">().<\/span><span class=\"nf\">method<\/span><span class=\"p\">()<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span>\n        <span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/**\n     * Publishes an article with the given details.\n     * @param {string} title - The title of the article.\n     * @param {string} description - A brief description of the article.\n     * @param {string} body - The main content of the article.\n     * @param {string}  - Optional tags for the article.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">publishArticle<\/span><span class=\"p\">(<\/span>\n        <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">description<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">body<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">tags<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span>\n    <span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleTitleInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleDescriptionInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">description<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleBodyInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">body<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleTagInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">publishArticleButton<\/span><span class=\"p\">.<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitForResponse<\/span><span class=\"p\">(<\/span>\n            <span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">url<\/span><span class=\"p\">().<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/articles\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">request<\/span><span class=\"p\">().<\/span><span class=\"nf\">method<\/span><span class=\"p\">()<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span>\n        <span class=\"p\">);<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span>\n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">heading<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">})<\/span>\n        <span class=\"p\">).<\/span><span class=\"nf\">toBeVisible<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/**\n     * Edits an existing article with the given details.\n     * @param {string} title - The new title of the article.\n     * @param {string} description - The new description of the article.\n     * @param {string} body - The new content of the article.\n     * @param {string}  - Optional new tags for the article.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">editArticle<\/span><span class=\"p\">(<\/span>\n        <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">description<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">body<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">tags<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span>\n    <span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleTitleInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleDescriptionInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">description<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleBodyInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">body<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">articleTagInput<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">publishArticleButton<\/span><span class=\"p\">.<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitForResponse<\/span><span class=\"p\">(<\/span>\n            <span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">url<\/span><span class=\"p\">().<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/articles\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">request<\/span><span class=\"p\">().<\/span><span class=\"nf\">method<\/span><span class=\"p\">()<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span>\n        <span class=\"p\">);<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span>\n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">heading<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">})<\/span>\n        <span class=\"p\">).<\/span><span class=\"nf\">toBeVisible<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/**\n     * Deletes the currently selected article.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">deleteArticle<\/span><span class=\"p\">():<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">deleteArticleButton<\/span><span class=\"p\">.<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByText<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Global Feed<\/span><span class=\"dl\">'<\/span><span class=\"p\">)).<\/span><span class=\"nf\">toBeVisible<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0645\u06a9\u0627\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0641\u0642\u0637 \u0631\u0648\u0634\u0647\u0627 (\u0628\u062f\u0648\u0646 \u062a\u0646\u0638\u06cc\u0645 \u062a\u0648\u0627\u0628\u0639 GET) \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0634\u0628\u0627\u0647\u062a \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0627 <strong>\u06cc\u0627\u0631\u0627\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/strong> \u0637\u0631\u0627\u062d\u06cc \u0637\u0631\u062d. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u062b\u0627\u0644\u06cc \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Page<\/span><span class=\"p\">,<\/span> <span class=\"nx\">expect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@playwright\/test<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"cm\">\/**\n * This is the page object for Article Page functionality.\n * @export\n * @class ArticlePage\n * @typedef {ArticlePage}\n *\/<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">ArticlePage<\/span> <span class=\"p\">{<\/span>\n\n    <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">page<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Page<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n    <span class=\"cm\">\/**\n     * Navigates to the edit article page by clicking the edit button.\n     * Waits for the page to reach a network idle state after navigation.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">navigateToEditArticlePage<\/span><span class=\"p\">():<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">link<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Edit Article<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}).<\/span><span class=\"nf\">first<\/span><span class=\"p\">().<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitForResponse<\/span><span class=\"p\">(<\/span>\n            <span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">url<\/span><span class=\"p\">().<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/articles\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">request<\/span><span class=\"p\">().<\/span><span class=\"nf\">method<\/span><span class=\"p\">()<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span>\n        <span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/**\n     * Publishes an article with the given details.\n     * @param {string} title - The title of the article.\n     * @param {string} description - A brief description of the article.\n     * @param {string} body - The main content of the article.\n     * @param {string}  - Optional tags for the article.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">publishArticle<\/span><span class=\"p\">(<\/span>\n        <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">description<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">body<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">tags<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span>\n    <span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Article Title<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">What's this article about?<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">description<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Write your article (in<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">body<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter tags<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Publish Article<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitForResponse<\/span><span class=\"p\">(<\/span>\n            <span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">url<\/span><span class=\"p\">().<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/articles\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">request<\/span><span class=\"p\">().<\/span><span class=\"nf\">method<\/span><span class=\"p\">()<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span>\n        <span class=\"p\">);<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span>\n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">heading<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">})<\/span>\n        <span class=\"p\">).<\/span><span class=\"nf\">toBeVisible<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/**\n     * Edits an existing article with the given details.\n     * @param {string} title - The new title of the article.\n     * @param {string} description - The new description of the article.\n     * @param {string} body - The new content of the article.\n     * @param {string}  - Optional new tags for the article.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">editArticle<\/span><span class=\"p\">(<\/span>\n        <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">description<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">body<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">tags<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span>\n    <span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Article Title<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">What's this article about?<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">description<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Write your article (in<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">body<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">textbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter tags<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">}).<\/span><span class=\"nf\">fill<\/span><span class=\"p\">(<\/span><span class=\"nx\">tags<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Publish Article<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitForResponse<\/span><span class=\"p\">(<\/span>\n            <span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">url<\/span><span class=\"p\">().<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/articles\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span>\n                <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">request<\/span><span class=\"p\">().<\/span><span class=\"nf\">method<\/span><span class=\"p\">()<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span>\n        <span class=\"p\">);<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span>\n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">heading<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">})<\/span>\n        <span class=\"p\">).<\/span><span class=\"nf\">toBeVisible<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/**\n     * Deletes the currently selected article.\n     * @returns {Promise<void>}\n     *\/<\/void><\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">deleteArticle<\/span><span class=\"p\">():<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByRole<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Delete Article<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}).<\/span><span class=\"nf\">first<\/span><span class=\"p\">().<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">await<\/span> <span class=\"nf\">expect<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nf\">getByText<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Global Feed<\/span><span class=\"dl\">'<\/span><span class=\"p\">)).<\/span><span class=\"nf\">toBeVisible<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631 \u062a\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0648\u0634\u0647\u0627 \u0645\u0646\u062c\u0631 \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631 \u0634\u0648\u062f \u060c \u0642\u0627\u0628\u0644 \u0628\u062d\u062b \u0627\u0633\u062a. \u0646\u0638\u0631 \u0645\u0646 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u062a\u0648\u0627\u0628\u0639 GET \u0628\u0686\u0633\u0628\u06cc\u062f \u0648 \u0627\u0632 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0631\u0648\u0634 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%AF_%D8%A8%D8%B9%D8%AF%DB%8C_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \ud83c\udfaf \u0628\u0639\u062f\u06cc \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc \u0645\u0627 \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u0634\u06cc\u0631\u062c\u0647 \u0645\u06cc \u0632\u0646\u06cc\u0645 <strong>POM (\u0645\u062f\u0644 \u0634\u06cc\u0621 \u0635\u0641\u062d\u0647)<\/strong> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0641\u06cc\u06a9\u0633\u0686\u0631 \u0648 \u0627\u06cc\u062c\u0627\u062f <strong>\u062c\u0644\u0633\u0647 \u06a9\u0627\u0631\u0628\u0631<\/strong>\u0628\u0634\u0631 <\/p>\n<blockquote>\n<p>\ud83d\udcac <strong>\u062c\u0627\u0645\u0639\u0647<\/strong>: \u0644\u0637\u0641\u0627\u064b \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0628\u062d\u062b \u0648 \u06af\u0641\u062a\u06af\u0648 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0627\u062d\u0633\u0627\u0633 \u0631\u0627\u062d\u062a\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0632\u06cc\u0631\u0627 \u0647\u0631 \u0633\u0647\u0645 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u067e\u0627\u0644\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f.<\/p>\n<\/blockquote>\n<hr\/>\n<p>\u2728 <strong>\u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u062a\u0633\u062a \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u062f\u061f<\/strong> \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0633\u0641\u0631 \u0631\u0627 \u0628\u0627 \u0647\u0645 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfaf \u0627\u0647\u0645\u06cc\u062a \u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc \u0627\u0647\u0645\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u062f\u0631 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u062a\u0633\u062a \u0642\u0627\u0628\u0644 \u062a\u062d\u0645\u0644 \u0646\u06cc\u0633\u062a! \u0627\u06cc\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062e\u062f\u0645\u062a \u0645\u06cc \u06a9\u0646\u062f \u0637\u0631\u062d \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u0631\u0648\u0634\u06cc \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f. \ud83c\udfad \ud83d\udca1 \u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc \u0686\u06cc\u0633\u062a\u061f \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0627\u062b\u0628\u0627\u062a \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0645\u0634\u06a9\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":110923,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ferqs50ax318cqmdebxzq.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-110922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/110922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=110922"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/110922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/110923"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=110922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=110922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=110922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}