{"id":24152,"date":"2023-05-21T04:41:40","date_gmt":"2023-05-21T01:11:40","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl\/"},"modified":"2023-05-21T04:41:40","modified_gmt":"2023-05-21T01:11:40","slug":"cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl\/","title":{"rendered":"\u06a9\u0627\u0631\u06af\u0627\u0647 \u0633\u0631\u0648 \u0642\u0633\u0645\u062a 5: \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0639\u0646\u0627\u0635\u0631 &#8211; \u062f\u06a9\u0645\u0647\u060c \u0648\u0631\u0648\u062f\u06cc\u060c \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc\u060c \u0686\u06a9 \u0628\u0627\u06a9\u0633"},"content":{"rendered":"<div data-article-id=\"1474493\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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\/cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl\/#%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%AF%DA%A9%D9%85%D9%87\" >\u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl\/#%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D9%88%D8%B1%D9%88%D8%AF%DB%8C\" >\u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0648\u0631\u0648\u062f\u06cc<\/a><\/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\/cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl\/#%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%AF%DA%A9%D9%85%D9%87_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\" >\u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl\/#%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%DA%A9%D8%A7%D8%AF%D8%B1_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8\" >\u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627\u062f\u0631 \u0627\u0646\u062a\u062e\u0627\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/cypress-workshop-part-5-elements-manipulation-button-input-radio-button-checkbox-1npl\/#%D9%85%D8%B4%D9%82_%D8%B4%D8%A8\" >\u0645\u0634\u0642 \u0634\u0628:<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%AF%DA%A9%D9%85%D9%87\"><\/span>\n<p>  \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0639\u0645\u0627\u0644 \u062f\u06a9\u0645\u0647 &#8211; \u06a9\u0644\u06cc\u06a9 \u0647\u0627\u060c \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u0647\u0627 \u062f\u0631 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0648\u0628 UI \u0647\u0633\u062a\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u062a\u0633\u062a\u060c \u0628\u0627\u06cc\u062f \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0631\u0648\u06cc \u0627\u0646\u0648\u0627\u0639 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u062d\u0628\u0648\u0628 \u062a\u0631\u06cc\u0646 \u0622\u0646\u0647\u0627 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0647\u06cc\u0645. <\/p>\n<p>\u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 \u0628\u06cc\u0634\u062a\u0631 \u0628\u06cc\u0627\u0645\u0648\u0632\u06cc\u062f: <br \/>\u2139\ufe0f \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<br \/>\u2139\ufe0f \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0639\u0646\u0627\u0635\u0631<\/p>\n<p>1: \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u062f\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>e2e<\/code> \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0622\u0646 \u0631\u0627 \u0635\u062f\u0627 \u06a9\u0646\u06cc\u062f <code>elements_manipulation<\/code>.  \u062f\u0631 \u0632\u06cc\u0631 \u0622\u0646 \u067e\u0648\u0634\u0647\u060c \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0622\u0646 \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f <code>button.cy.js<\/code>.<\/p>\n<p>2: \u062a\u0633\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0622\u0646 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/\/ &lt;reference types=\"Cypress\" \/&gt;<\/span>\n\n<span class=\"nx\">describe<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Buttons: Button actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">before<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Navigate to buttons page<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">visit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/buttons<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nx\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Check different button actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Double click on button<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#doubleClickBtn<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">dblclick<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">You have done a double click<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.visible<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Right-click on button<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#rightClickBtn<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">rightclick<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">You have done a right click<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.visible<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Click on button<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">[class=\"btn btn-primary\"]<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">buttons<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">buttons<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">).<\/span><span class=\"nx\">click<\/span><span class=\"p\">();<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">You have done a dynamic click<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.visible<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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><strong>\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f:<\/strong> <\/p>\n<p>\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u062f\u06a9\u0645\u0647 \u0647\u0627 (\u0635\u0641\u062d\u0647) \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>before<\/code> \u0628\u0631\u0627\u06cc \u0622\u0646 \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0641\u0642\u0637 1 \u062a\u0633\u062a \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u062f\u0627\u062e\u0644 \u0628\u062f\u0646\u0647 \u062a\u0633\u062a\u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 3 \u0645\u062b\u0627\u0644 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645: \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0648\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u060c \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u0631\u0627\u0633\u062a \u06a9\u0644\u06cc\u06a9 \u0648 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9 \u067e\u0648\u06cc\u0627.<\/p>\n<ul>\n<li>\n<p>\u062f\u0627\u0628\u0644 \u06a9\u0644\u06cc\u06a9: \u0645\u0627 \u062f\u06a9\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0639\u0645\u0644 \u062f\u0648\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 <code>dblclick()<\/code> \u0648 \u067e\u0633 \u0627\u0632 \u0622\u0646 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u062f\u0639\u0627 \u0647\u0633\u062a\u06cc\u0645 \u062a\u0627 \u067e\u0633 \u0627\u0632 \u062f\u0648\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u060c \u0645\u062a\u0646 \u0645\u0646\u0627\u0633\u0628 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u062f. <\/p>\n<\/li>\n<li>\n<p>\u06a9\u0644\u06cc\u06a9 \u0631\u0627\u0633\u062a: \u0645\u0627 \u062f\u06a9\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0639\u0645\u0644 \u06a9\u0644\u06cc\u06a9 \u0631\u0627\u0633\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 <code>rightclick()<\/code> \u0648 \u067e\u0633 \u0627\u0632 \u0622\u0646 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u062f\u0639\u0627 \u0647\u0633\u062a\u06cc\u0645 \u062a\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0631\u0627\u0633\u062a \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u060c \u0645\u062a\u0646 \u0645\u0646\u0627\u0633\u0628 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a. <\/p>\n<\/li>\n<li>\n<p>\u06cc\u06a9 \u06a9\u0644\u06cc\u06a9: \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u06cc\u0627\u0641\u062a\u0646 \u062f\u06a9\u0645\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645 \u0648 \u0639\u0645\u0644 \u062a\u06a9 \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 <code>click()<\/code> \u0648 \u067e\u0633 \u0627\u0632 \u0622\u0646 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u062f\u0639\u0627 \u0647\u0633\u062a\u06cc\u0645 \u062a\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u060c \u0645\u062a\u0646 \u0645\u0646\u0627\u0633\u0628 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a.  \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0645\u0627 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0646\u062f\u0627\u0634\u062a\u06cc\u0645 <code>id<\/code>\u060c \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u0633\u0627\u06cc\u0631\u06cc\u0646\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u062a\u0639\u0644\u0642 \u0628\u0647 \u0622\u0646 \u0627\u0633\u062a \u062f\u0631 \u06cc\u06a9 \u0634\u06cc JQuery \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u06cc\u0645 \u0648 \u0639\u0646\u0635\u0631 \u0633\u0648\u0645 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u06a9\u0644\u0627\u0633 (\u062f\u06a9\u0645\u0647 \u0645\u0648\u0636\u0648\u0639 \u0645\u0627) \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n<\/li>\n<\/ul>\n<p>3: \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f: cypress CLI \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0644\u0627\u06af \u0647\u0627 \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/\u06a9\u0627\u0631\u06af\u0627\u0647-\u0633\u0631\u0648-\u0642\u0633\u0645\u062a-5-\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc-\u0639\u0646\u0627\u0635\u0631-\u062f\u06a9\u0645\u0647\u060c-\u0648\u0631\u0648\u062f\u06cc\u060c-\u062f\u06a9\u0645\u0647.png\" alt=\"\u062a\u0633\u062a \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 - \u0646\u062a\u0627\u06cc\u062c \u0627\u062c\u0631\u0627\" loading=\"lazy\" width=\"800\" height=\"710\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D9%88%D8%B1%D9%88%D8%AF%DB%8C\"><\/span>\n<p>  \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0648\u0631\u0648\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0648\u0631\u0648\u062f\u06cc \u0647\u0627 \u0646\u06cc\u0632 \u0639\u0646\u0627\u0635\u0631 \u0648\u0628 \u0628\u0633\u06cc\u0627\u0631 \u0631\u0627\u06cc\u062c\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0627 \u0622\u0646\u0647\u0627 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u062a\u0633\u062a \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n<p>\u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0648\u0631\u0648\u062f\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f: <br \/>\u2139\ufe0f \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f<br \/>\u2139\ufe0f \u0631\u0648\u0634\u0646<\/p>\n<p>1: \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>e2e\/elements_manipulation<\/code> \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0622\u0646 \u0631\u0627 \u0635\u062f\u0627 \u06a9\u0646\u06cc\u062f <code>input.cy.js<\/code>.  \u062a\u0633\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0622\u0646 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/\/ &lt;reference types=\"Cypress\" \/&gt;<\/span>\n\n<span class=\"nx\">describe<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Inputs: Input actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">before<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Navigate to input page<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">visit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/text-box<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nx\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Check different input actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Fill the form details<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#userName<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">type<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Arya Stark<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#userEmail<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">type<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">noone@example.com<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#currentAddress<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">type<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Braavos, East of Westeros<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#permanentAddress<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">type<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Winterfell,{enter}Kingdom of the North,{enter}Westeros<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Submit form and check if expected text is dispalyed<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#submit<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">click<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ Example assertions - Verify that we got correct output for name and email<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#name<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Arya Stark<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#email<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">noone@example.com<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Edit username input field, submit form and assert that username is changed<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#userName<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">clear<\/span><span class=\"p\">().<\/span><span class=\"nx\">type<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Jon Snow<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#submit<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">click<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#name<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Jon Snow<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">});<\/span>\n\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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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><strong>\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f:<\/strong><\/p>\n<p>\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u0648\u0631\u0648\u062f\u06cc \u0647\u0627 (\u062c\u0639\u0628\u0647 \u0645\u062a\u0646) \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>before<\/code> \u0628\u0631\u0627\u06cc \u0622\u0646 \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0641\u0642\u0637 1 \u062a\u0633\u062a \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f\u060c \u062f\u0631 \u0622\u0646 \u0635\u0641\u062d\u0647\u060c \u0686\u0646\u062f\u06cc\u0646 \u0641\u06cc\u0644\u062f \u0648\u0631\u0648\u062f\u06cc \u0648 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u0631\u06cc\u0645. <\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0641\u0631\u0645 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645: \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0627\u06cc\u0645\u06cc\u0644\u060c \u0622\u062f\u0631\u0633 \u0641\u0639\u0644\u06cc \u0648 \u0622\u062f\u0631\u0633 \u062f\u0627\u0626\u0645\u06cc.  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>type()<\/code> \u062a\u0627\u0628\u0639 \u0633\u0631\u0648 \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u0645\u062a\u0646.  \u062f\u0631 \u0622\u062f\u0631\u0633 \u062f\u0627\u0626\u0645\u06cc \u0645\u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0647\u0645 \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a <code>ENTER<\/code> \u06a9\u0644\u06cc\u062f \u0628\u0627 <code>{enter}<\/code> \u06af\u0632\u06cc\u0646\u0647\u060c \u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u0646\u0648\u0634\u062a\u0646 \u0622\u062f\u0631\u0633 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0686\u0646\u062f \u062e\u0637. <\/p>\n<p>\u0633\u067e\u0633 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 (\u062f\u06a9\u0645\u0647 \u0627\u0632 <code>type=\"button\"<\/code> \u0648 \u0646\u0647 <code>\"submit\"<\/code> \u060c \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0633\u0631\u0648 \u0628\u0648\u0645\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645 \u0647\u0627 \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 (\u0627\u062f\u0627\u0645\u0647 \u0645\u0637\u0644\u0628 \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f)<\/p>\n<p>\u0628\u0639\u062f \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0641\u0631\u0645 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0631\u062f\u06cc\u0645\u060c \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0638\u0647\u0627\u0631\u0627\u062a \u0647\u0633\u062a\u06cc\u0645 \u062a\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u062e\u0631\u0648\u062c\u06cc \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u062e\u0631\u0648\u062c\u06cc \u0645\u062a\u0646 \u0646\u0627\u0645 \u0648 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u06cc\u0627 \u062e\u06cc\u0631. <\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0648\u0628\u0627\u0631\u0647 \u0641\u0631\u0645 \u0631\u0627 \u0628\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u0627 \u0627\u0632 \u062a\u0627\u0628\u0639 \u0633\u0631\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>clear()<\/code> \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u0645\u0642\u062f\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0642\u0628\u0644\u06cc \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0648 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0627\u06cc\u067e \u0646\u0627\u0645 \u062c\u062f\u06cc\u062f \u0647\u0633\u062a\u06cc\u0645. <\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0641\u0631\u0645 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0646\u0627\u0645 \u0628\u0647 \u0641\u0631\u0645 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631. <\/p>\n<p>2: \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f: Cypress CLI \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0644\u0627\u06af \u0647\u0627 \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/1684631498_887_\u06a9\u0627\u0631\u06af\u0627\u0647-\u0633\u0631\u0648-\u0642\u0633\u0645\u062a-5-\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc-\u0639\u0646\u0627\u0635\u0631-\u062f\u06a9\u0645\u0647\u060c-\u0648\u0631\u0648\u062f\u06cc\u060c-\u062f\u06a9\u0645\u0647.png\" alt=\"\u062a\u0633\u062a \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0648\u0631\u0648\u062f\u06cc - \u0646\u062a\u0627\u06cc\u062c \u0627\u062c\u0631\u0627\" loading=\"lazy\" width=\"800\" height=\"470\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%AF%DA%A9%D9%85%D9%87_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\"><\/span>\n<p>  \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0645\u062d\u0628\u0648\u0628 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u0647\u0633\u062a\u0646\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u2139\ufe0f \u062f\u0631\u0628\u0627\u0631\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f: <br \/>\u0628\u0631\u0631\u0633\u06cc<\/p>\n<p>1: \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>e2e\/elements_manipulation<\/code> \u0648 \u0645\u062b\u0644\u0627 \u0627\u0633\u0645\u0634 \u0631\u0627 \u0628\u06af\u0630\u0627\u0631 <code>radioButton.cy.js<\/code>.  \u062a\u0633\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0622\u0646 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/\/ &lt;reference types=\"Cypress\" \/&gt;<\/span>\n\n<span class=\"nx\">describe<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Radio Buttons: Radio Button actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">before<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Navigate to radio buttons page<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">visit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/radio-button<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nx\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Check different radio button actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.custom-radio<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nx\">find<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">[type=\"radio\"]<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">radio<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"cm\">\/* Get all radio buttons, select first one and verify that it is \n         checked and that we got confirmation text *\/<\/span>\n        <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">radio<\/span><span class=\"p\">).<\/span><span class=\"nx\">first<\/span><span class=\"p\">().<\/span><span class=\"nx\">check<\/span><span class=\"p\">({<\/span> <span class=\"na\">force<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.text-success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Yes<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"cm\">\/* Get all radio buttons, select second one and verify that it is \n         checked and that we got confirmation text *\/<\/span>\n        <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">radio<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">check<\/span><span class=\"p\">({<\/span> <span class=\"na\">force<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.text-success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Impressive<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"c1\">\/\/ Verify that first radio button is no longer checked<\/span>\n        <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">radio<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">not.be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"c1\">\/\/ Verify that third button is disabled<\/span>\n        <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">radio<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.disabled<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">});<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">});<\/span>\n\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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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><strong>\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f:<\/strong> <\/p>\n<p>\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc (\u0635\u0641\u062d\u0647) \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>before<\/code> \u0628\u0631\u0627\u06cc \u0622\u0646 \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0641\u0642\u0637 1 \u062a\u0633\u062a \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<p>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0645\u0627 \u0633\u0639\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0628\u0627 \u062c\u0633\u062a\u062c\u0648\u06cc \u06a9\u0644\u0627\u0633 \u0648 \u062a\u0627\u06cc\u067e\u060c \u062a\u0645\u0627\u0645 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0635\u0641\u062d\u0647 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u0633\u067e\u0633\u060c \u0645\u0627 \u0634\u06cc\u0621 JQuery \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u062a\u0645\u0627\u0645 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u062e\u0648\u062f \u0631\u0627 \u062c\u0645\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0627\u0648\u0644\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0631\u0648 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>.first()<\/code> (\u062a\u0648\u062c\u0647: \u0627\u06cc\u0646 \u0647\u0645\u0627\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u06af\u0631 \u0646\u0645\u0627\u06cc\u0647 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 <code>.eq(0)<\/code>).  \u0645\u0627 \u0627\u06cc\u0646 \u0627\u0642\u062f\u0627\u0645 \u0631\u0627 \u0645\u062c\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0632\u06cc\u0631\u0627 \u0639\u0646\u0635\u0631 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0631 DOM \u062f\u0631 \u062d\u0627\u0644 \u0634\u0646\u0627\u0648\u0631 \u0628\u0648\u062f\u0646 \u0639\u0646\u0635\u0631 \u0645\u0627\u0633\u062a (<code>{ force: true }<\/code>) \u0648 \u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0645\u0627 \u0639\u0644\u0627\u0645\u062a \u0632\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0645\u062a\u0646 \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0633\u067e\u0633\u060c \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u062f\u0648\u0645 \u0631\u0627 \u0628\u0627 \u0634\u0627\u062e\u0635 \u062f\u0648\u0645 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>.eq(1)<\/code> \u0648 \u0645\u0627 \u0647\u0645\u0627\u0646 \u0628\u0631\u0631\u0633\u06cc\u200c\u0647\u0627\u06cc \u0645\u062b\u0627\u0644 \u0642\u0628\u0644\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645\u060c \u0628\u0627 \u0627\u06cc\u0646 \u062a\u0641\u0627\u0648\u062a \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u0627\u062f\u0639\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645 &#8211; \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0642\u0628\u0644\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a. <\/p>\n<p>\u0633\u067e\u0633\u060c \u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0633\u0648\u0645 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0627\u0633\u062a &#8211; \u063a\u06cc\u0631\u0642\u0627\u0628\u0644 \u06a9\u0644\u06cc\u06a9. <\/p>\n<p>\u2139\ufe0f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc\u060c \u0627\u063a\u0644\u0628 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc\u200c\u0627\u0641\u062a\u062f \u06a9\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc\u060c \u0686\u06a9 \u0628\u0627\u06a9\u0633\u200c\u0647\u0627 \u0648 \u0645\u0648\u0627\u0631\u062f \u0645\u0634\u0627\u0628\u0647 &#8211; \u0634\u0646\u0627\u0633\u0647\u200c\u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631\u0628\u0647\u200c\u0641\u0631\u062f \u0646\u062f\u0627\u0631\u0646\u062f.  \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u062a\u0633\u062a \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0646\u0627\u0633\u0647 \u0647\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0648 \u062c\u0633\u062a\u062c\u0648\u06cc \u0639\u0646\u0627\u0635\u0631 \u062a\u0648\u0633\u0637 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a (\u0646\u06a9\u062a\u0647 \u062a\u06a9\u0644\u06cc\u0641: \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u062a\u0633\u062a \u0631\u0627 \u0628\u0647 \u0631\u0648\u0634 \u062f\u06cc\u06af\u0631\u06cc \u062a\u0645\u0631\u06cc\u0646 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f\u060c \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0627\u0632 \u0634\u0646\u0627\u0633\u0647 \u0647\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f).<\/p>\n<p>2: \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f: Cypress CLI \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0644\u0627\u06af \u0647\u0627 \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/1684631498_490_\u06a9\u0627\u0631\u06af\u0627\u0647-\u0633\u0631\u0648-\u0642\u0633\u0645\u062a-5-\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc-\u0639\u0646\u0627\u0635\u0631-\u062f\u06a9\u0645\u0647\u060c-\u0648\u0631\u0648\u062f\u06cc\u060c-\u062f\u06a9\u0645\u0647.png\" alt=\"\u062a\u0633\u062a \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc - \u0646\u062a\u0627\u06cc\u062c \u0627\u062c\u0631\u0627\" loading=\"lazy\" width=\"800\" height=\"427\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%DA%A9%D8%A7%D8%AF%D8%B1_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8\"><\/span>\n<p>  \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627\u062f\u0631 \u0627\u0646\u062a\u062e\u0627\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0628\u0633\u06cc\u0627\u0631 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u0628\u0627 \u0627\u06cc\u0646 \u062a\u0641\u0627\u0648\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0633\u062a.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0644\u0627\u0634 \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627\u062f\u0631 \u062a\u0623\u06cc\u06cc\u062f \u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f: <br \/>\u2139\ufe0f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<br \/>\u2139\ufe0f \u0639\u0644\u0627\u0645\u062a \u0631\u0627 \u0628\u0631\u062f\u0627\u0631\u06cc\u062f<\/p>\n<p>1: \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>e2e\/elements_manipulation<\/code> \u0648 \u0645\u062b\u0644\u0627 \u0627\u0633\u0645\u0634 \u0631\u0627 \u0628\u06af\u0630\u0627\u0631 <code>checkbox.cy.js<\/code>.  \u062a\u0633\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0622\u0646 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/\/ &lt;reference types=\"Cypress\" \/&gt;<\/span>\n\n<span class=\"nx\">describe<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Checkboxes: Checkbox actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">before<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Navigate to checkbox page<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">visit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/checkbox<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nx\">it<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Check different checkbox actions<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Open home dropdown<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button[aria-label=\"Toggle\"]<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">click<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ Open Desktop dropdown<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button[aria-label=\"Toggle\"]<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">click<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ Get all checkboxes, select Desktop folder and everything under desktop folder.<\/span>\n    <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">[type=\"checkbox\"]<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">checkbox<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">checkbox<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">).<\/span><span class=\"nx\">check<\/span><span class=\"p\">({<\/span> <span class=\"na\">force<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ Verify that correct text is displayed for chosen options<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.text-success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">desktop<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.text-success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">notes<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.text-success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">commands<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Uncheck notes<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">checkbox<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">).<\/span><span class=\"nx\">uncheck<\/span><span class=\"p\">({<\/span> <span class=\"na\">force<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">not.be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.text-success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">notes<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">not.exist<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"cm\">\/* Select every checkbox in the tree, uncheck Notes and then select Notes by \n          not specifying exact Notes checkbox index *\/<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">checkbox<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">).<\/span><span class=\"nx\">check<\/span><span class=\"p\">({<\/span> <span class=\"na\">force<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">checkbox<\/span><span class=\"p\">).<\/span><span class=\"nx\">eq<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">).<\/span><span class=\"nx\">uncheck<\/span><span class=\"p\">({<\/span> <span class=\"na\">force<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">not.be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">wrap<\/span><span class=\"p\">(<\/span><span class=\"nx\">checkbox<\/span><span class=\"p\">).<\/span><span class=\"nx\">check<\/span><span class=\"p\">({<\/span> <span class=\"na\">force<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}).<\/span><span class=\"nx\">should<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">be.checked<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">cy<\/span><span class=\"p\">.<\/span><span class=\"nx\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.text-success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">notes<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">});<\/span>\n\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>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\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><strong>\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f:<\/strong><\/p>\n<p>\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0632 \u0635\u0641\u062d\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc (\u0635\u0641\u062d\u0647) \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>before<\/code> \u0628\u0631\u0627\u06cc \u0622\u0646 \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u0627 \u0641\u0642\u0637 1 \u062a\u0633\u062a \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u067e\u06cc\u06a9\u0627\u0646 Home \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u062f\u0631\u062e\u062a \u06a9\u0634\u0648\u06cc\u06cc \u06af\u0633\u062a\u0631\u0634 \u06cc\u0627\u0628\u062f. <\/p>\n<p>\u0633\u067e\u0633 \u0631\u0648\u06cc \u067e\u06cc\u06a9\u0627\u0646 Desktop \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u0622\u0646 \u06af\u0633\u062a\u0631\u0634 \u06cc\u0627\u0628\u062f. <\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 DOM \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645\u060c \u0634\u0646\u0627\u0633\u0647 \u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0646\u062f\u0627\u0631\u0646\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u0627 \u062f\u0631 \u062c\u0633\u062a\u062c\u0648\u06cc \u0647\u0645\u0647 \u0639\u0646\u0627\u0635\u0631 \u0647\u0633\u062a\u06cc\u0645 <code>type=\"checkbox\"<\/code> \u060c \u0645\u0627 \u0634\u06cc\u0621 JQuery \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0633\u067e\u0633 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0639\u0646\u0627\u0635\u0631 \u0648\u0627\u062d\u062f\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645. <\/p>\n<p>\u0627\u0648\u0644\u060c \u0645\u0627 \u0631\u0648\u06cc \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u062f\u0648\u0645 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u067e\u0648\u0634\u0647 Desktop \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0633\u067e\u0633 \u0628\u0631 \u0631\u0648\u06cc \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u0631 \u067e\u0648\u0634\u0647 Desktop \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u0648\u062f.  \u0645\u0627 \u0627\u062f\u0639\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0648\u0627\u0644\u062f \u062f\u0633\u06a9\u062a\u0627\u067e \u0639\u0644\u0627\u0645\u062a \u0632\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0648 \u0645\u0627 \u0627\u062f\u0639\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062e\u0631\u0648\u062c\u06cc \u0645\u062a\u0646\u06cc \u0628\u0631\u0627\u06cc \u062f\u0633\u06a9\u062a\u0627\u067e \u0648 \u067e\u0648\u0634\u0647 \u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u0622\u0646 &#8211; \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627 \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.<\/p>\n<p>\u0633\u067e\u0633\u060c \u0645\u0627 \u0639\u0644\u0627\u0645\u062a \u0686\u06a9 \u0628\u0627\u06a9\u0633 Notes \u0631\u0627 \u0628\u0631\u062f\u0627\u0631\u06cc\u0645\u060c \u0627\u062f\u0639\u0627 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u06a9\u0646\u0648\u0646 \u0639\u0644\u0627\u0645\u062a \u0622\u0646 \u0628\u0631\u062f\u0627\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0645\u062a\u0646 \u062e\u0631\u0648\u062c\u06cc \u00ab\u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u00bb \u062f\u06cc\u06af\u0631 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645 <code>uncheck()<\/code> \u062a\u0627\u0628\u0639.  \u0686\u0631\u0627\u061f  \u0632\u06cc\u0631\u0627 <code>check()<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0641\u0642\u0637 \u0628\u0631\u0631\u0633\u06cc \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u0648 \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0639\u0644\u0627\u0645\u062a \u0686\u06cc\u0632\u06cc \u0631\u0627 \u0628\u0631\u062f\u0627\u0631\u06cc\u062f\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>uncheck()<\/code> \u06cc\u0627  <code>click()<\/code>.<\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u062a\u0645\u0627\u0645 \u0686\u06a9 \u0628\u0627\u06a9\u0633\u200c\u0647\u0627\u06cc \u062f\u0631\u062e\u062a \u062e\u0627\u0646\u0647 \u0648 \u0647\u0645\u0647 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u0645.  \u0627\u0645\u0627\u060c \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0647 \u0645\u0634\u062e\u0635\u06cc \u0628\u0631\u0627\u06cc \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0646\u06cc\u0627\u0632 \u0646\u062f\u0627\u0631\u06cc\u0645\u060c \u062a\u06cc\u06a9 Notes \u0631\u0627 \u0628\u0631\u062f\u0627\u0631\u06cc\u0645 (\u062e\u0637: 30).  \u062f\u0631 \u062e\u0637 32\u060c \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u0645\u0634\u062e\u0635 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 Notes \u0639\u0644\u0627\u0645\u062a \u0632\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a (\u062e\u0637: 32\u060c 33).  \u0633\u0631\u0648 \u0627\u0632 \u06a9\u062c\u0627 \u0645\u06cc \u062f\u0627\u0646\u0633\u062a \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u062f\u061f  \u0632\u06cc\u0631\u0627 <code>check()<\/code> \u062a\u0627\u0628\u0639 \u0647\u0645\u06cc\u0634\u0647 \u062a\u0645\u0627\u0645 \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0635\u0641\u062d\u0647 \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c \u0648\u0636\u0639\u06cc\u062a \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u06af\u0631 \u0641\u0642\u0637 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0628\u062f\u0648\u0646 \u0639\u0644\u0627\u0645\u062a \u0628\u0627\u0642\u06cc \u0628\u0645\u0627\u0646\u062f\u060c \u0622\u0646 \u06cc\u06a9\u06cc \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06af\u0631 \u0645\u0648\u0627\u0631\u062f \u0628\u06cc\u0634\u062a\u0631\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0628\u0627\u06cc\u062f \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u06cc\u06a9 \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u0645. <\/p>\n<p>2: \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f: cypress CLI \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u062a\u0633\u062a \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.  \u0628\u0647 \u0644\u0627\u06af \u0647\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/1684631499_705_\u06a9\u0627\u0631\u06af\u0627\u0647-\u0633\u0631\u0648-\u0642\u0633\u0645\u062a-5-\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc-\u0639\u0646\u0627\u0635\u0631-\u062f\u06a9\u0645\u0647\u060c-\u0648\u0631\u0648\u062f\u06cc\u060c-\u062f\u06a9\u0645\u0647.png\" alt=\"\u062a\u0633\u062a \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627\u062f\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 - \u0646\u062a\u0627\u06cc\u062c \u0627\u062c\u0631\u0627\" loading=\"lazy\" width=\"800\" height=\"393\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B4%D9%82_%D8%B4%D8%A8\"><\/span>\n<p>  \u0645\u0634\u0642 \u0634\u0628:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0622\u0646\u0647\u0627 \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0631\u0627\u06cc \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u060c \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc\u060c \u0639\u0644\u0627\u0645\u062a \u0632\u062f\u0646 \u0686\u06a9 \u0628\u0627\u06a9\u0633 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u062f\u0631 \u0647\u0645\u0627\u0646 \u0635\u0641\u062d\u0627\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u0627\u0644\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645. <\/p>\n<p>\u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u0645\u0631\u0648\u0632 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u062f \u062f\u0631 Github \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f \ud83d\ude09 \u062f\u0633\u062a\u0648\u0631\u0627\u062a git \u0631\u0627 \u0628\u0647 \u062e\u0627\u0637\u0631 \u062f\u0627\u0631\u06cc\u062f\u061f<\/p>\n<p><code>git add .<\/code><\/p>\n<p><code>git commit -am \"add: button, radio button, input, checkbox tests\"<\/code><\/p>\n<p><code>git push<\/code><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/\u06a9\u0627\u0631\u06af\u0627\u0647-\u0633\u0631\u0648-\u0642\u0633\u0645\u062a-5-\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc-\u0639\u0646\u0627\u0635\u0631-\u062f\u06a9\u0645\u0647\u060c-\u0648\u0631\u0648\u062f\u06cc\u060c-\u062f\u06a9\u0645\u0647.gif\" loading=\"lazy\" width=\"350\" height=\"288\" data-animated=\"true\" alt=\"\" title=\"\"><\/p>\n<p>\u0628\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f\u060c \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u062f\u0631\u0633 6 \u0645\u06cc \u0628\u06cc\u0646\u0645!<\/p>\n<p>\u06a9\u062f \u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f\u0647 \u0627\u06cc\u0646 \u062f\u0631\u0633<\/p>\n<p>\u0627\u06af\u0631 \u0686\u06cc\u0632 \u062c\u062f\u06cc\u062f\u06cc \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc\u062f \u0628\u0627 \u062e\u0631\u06cc\u062f \u06cc\u06a9 \u0642\u0647\u0648\u0647 \u0627\u0632 \u06a9\u0627\u0631 \u0645\u0646 \u062d\u0645\u0627\u06cc\u062a \u06a9\u0646\u06cc\u062f \u2615<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/05\/1684631499_231_\u06a9\u0627\u0631\u06af\u0627\u0647-\u0633\u0631\u0648-\u0642\u0633\u0645\u062a-5-\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc-\u0639\u0646\u0627\u0635\u0631-\u062f\u06a9\u0645\u0647\u060c-\u0648\u0631\u0648\u062f\u06cc\u060c-\u062f\u06a9\u0645\u0647.png\" alt=\"\u0628\u0631\u0627\u06cc \u0645\u0646 \u06cc\u06a9 \u0642\u0647\u0648\u0647 \u0628\u062e\u0631\" loading=\"lazy\" width=\"434\" height=\"100\" title=\"\"><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 \u0627\u0639\u0645\u0627\u0644 \u062f\u06a9\u0645\u0647 &#8211; \u06a9\u0644\u06cc\u06a9 \u0647\u0627\u060c \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u0647\u0627 \u062f\u0631 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0648\u0628 UI \u0647\u0633\u062a\u0646\u062f. \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u062a\u0633\u062a\u060c \u0628\u0627\u06cc\u062f \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0631\u0648\u06cc \u0627\u0646\u0648\u0627\u0639 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u062d\u0628\u0648\u0628 \u062a\u0631\u06cc\u0646 \u0622\u0646\u0647\u0627 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0647\u06cc\u0645. \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u06a9\u0645\u0647 \u0628\u06cc\u0634\u062a\u0631 \u0628\u06cc\u0627\u0645\u0648\u0632\u06cc\u062f: \u2139\ufe0f \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\u2139\ufe0f \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0639\u0646\u0627\u0635\u0631 1: \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u062f\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-24152","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/24152","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=24152"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/24152\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=24152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=24152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=24152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}