{"id":19657,"date":"2024-04-28T22:02:05","date_gmt":"2024-04-28T19:02:05","guid":{"rendered":"https:\/\/iqaengineer.com\/?page_id=19657"},"modified":"2026-09-13T10:37:41","modified_gmt":"2026-09-13T07:37:41","slug":"course_playwright","status":"publish","type":"page","link":"https:\/\/iqaengineer.com\/ua\/course_playwright\/","title":{"rendered":"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA - \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 iQAEngineer"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"19657\" class=\"elementor elementor-19657\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4df3946 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"4df3946\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bd9ae91\" data-id=\"bd9ae91\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-33447ce elementor-widget elementor-widget-html\" data-id=\"33447ce\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* ==================================================\r\n   PLAYWRIGHT COURSE \u2014 HERO\r\n   Elementor HTML Widget\r\n================================================== *\/\r\n\r\n.pw-hero {\r\n    --pw-bg: #06110b;\r\n    --pw-card: rgba(255,255,255,.035);\r\n    --pw-text: #f8faf9;\r\n    --pw-sub: #a6b3aa;\r\n    --pw-green: #22c55e;\r\n    --pw-green-light: #4ade80;\r\n    --pw-green-soft: #86efac;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    padding: 120px 20px 100px;\r\n    color: var(--pw-text);\r\n    font-family: inherit;\r\n\r\n    background:\r\n        repeating-linear-gradient(\r\n            0deg,\r\n            transparent 0px,\r\n            transparent 79px,\r\n            rgba(74,222,128,.045) 80px\r\n        ),\r\n        repeating-linear-gradient(\r\n            90deg,\r\n            transparent 0px,\r\n            transparent 79px,\r\n            rgba(74,222,128,.045) 80px\r\n        ),\r\n        radial-gradient(\r\n            circle at 50% -10%,\r\n            rgba(34,197,94,.24),\r\n            transparent 42%\r\n        ),\r\n        radial-gradient(\r\n            circle at 90% 55%,\r\n            rgba(34,197,94,.07),\r\n            transparent 30%\r\n        ),\r\n        radial-gradient(\r\n            circle at 5% 70%,\r\n            rgba(74,222,128,.05),\r\n            transparent 28%\r\n        ),\r\n        linear-gradient(\r\n            180deg,\r\n            #07130c 0%,\r\n            #06110b 100%\r\n        );\r\n}\r\n\r\n.pw-hero * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-hero::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 700px;\r\n    height: 400px;\r\n    top: -270px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: rgba(34,197,94,.16);\r\n    filter: blur(110px);\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-hero::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 140%;\r\n    height: 1px;\r\n    left: -20%;\r\n    top: 58%;\r\n\r\n    background: linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(74,222,128,.08),\r\n        rgba(74,222,128,.28),\r\n        rgba(34,197,94,.35),\r\n        rgba(74,222,128,.18),\r\n        transparent\r\n    );\r\n\r\n    transform: rotate(-7deg);\r\n    box-shadow: 0 0 25px rgba(34,197,94,.12);\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-hero-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    text-align: center;\r\n}\r\n\r\n.pw-hero-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n\r\n    margin-bottom: 28px;\r\n    padding: 9px 17px;\r\n\r\n    border: 1px solid rgba(74,222,128,.25);\r\n    border-radius: 100px;\r\n\r\n    background: rgba(34,197,94,.07);\r\n    color: var(--pw-green-light);\r\n\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n    letter-spacing: .5px;\r\n    text-transform: uppercase;\r\n\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.pw-hero-badge::before {\r\n    content: \"\";\r\n    flex: 0 0 auto;\r\n\r\n    width: 7px;\r\n    height: 7px;\r\n\r\n    background: var(--pw-green-light);\r\n    border-radius: 50%;\r\n\r\n    box-shadow: 0 0 12px rgba(74,222,128,.9);\r\n}\r\n\r\n.pw-hero h1 {\r\n    max-width: 1080px;\r\n    margin: 0 auto 28px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: clamp(44px, 6vw, 78px);\r\n    font-weight: 800;\r\n    line-height: 1.06;\r\n    letter-spacing: -2.5px;\r\n}\r\n\r\n.pw-hero h1 .pw-accent {\r\n    display: block;\r\n    margin-top: 9px;\r\n\r\n    background: linear-gradient(\r\n        90deg,\r\n        #22c55e,\r\n        #4ade80,\r\n        #86efac\r\n    );\r\n\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n}\r\n\r\n.pw-hero-description {\r\n    max-width: 900px;\r\n    margin: 0 auto 45px;\r\n\r\n    color: var(--pw-sub);\r\n\r\n    font-size: 20px;\r\n    line-height: 1.75;\r\n}\r\n\r\n.pw-hero-description strong {\r\n    color: #ffffff;\r\n    font-weight: 700;\r\n}\r\n\r\n.pw-tech-line {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n\r\n    gap: 8px;\r\n    margin: -16px auto 42px;\r\n}\r\n\r\n.pw-tech-line span {\r\n    padding: 7px 12px;\r\n\r\n    border: 1px solid rgba(255,255,255,.08);\r\n    border-radius: 8px;\r\n\r\n    background: rgba(255,255,255,.025);\r\n    color: #c7d2cb;\r\n\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n\r\n    backdrop-filter: blur(5px);\r\n\r\n    transition:\r\n        border-color .2s ease,\r\n        color .2s ease,\r\n        background .2s ease;\r\n}\r\n\r\n.pw-tech-line span:hover {\r\n    color: var(--pw-green-light);\r\n    border-color: rgba(74,222,128,.25);\r\n    background: rgba(34,197,94,.06);\r\n}\r\n\r\n.pw-hero-features {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 14px;\r\n\r\n    max-width: 1100px;\r\n    margin: 0 auto 44px;\r\n}\r\n\r\n.pw-feature {\r\n    position: relative;\r\n    min-width: 0;\r\n    padding: 24px 16px;\r\n    overflow: hidden;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.05),\r\n            rgba(255,255,255,.018)\r\n        );\r\n\r\n    border: 1px solid rgba(255,255,255,.075);\r\n    border-radius: 16px;\r\n\r\n    backdrop-filter: blur(8px);\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        border-color .25s ease,\r\n        background .25s ease,\r\n        box-shadow .25s ease;\r\n}\r\n\r\n.pw-feature::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 20%;\r\n\r\n    width: 60%;\r\n    height: 1px;\r\n\r\n    background: linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(74,222,128,.28),\r\n        transparent\r\n    );\r\n}\r\n\r\n.pw-feature:hover {\r\n    transform: translateY(-5px);\r\n    border-color: rgba(74,222,128,.32);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(34,197,94,.085),\r\n            rgba(255,255,255,.02)\r\n        );\r\n\r\n    box-shadow: 0 18px 45px rgba(0,0,0,.18);\r\n}\r\n\r\n.pw-feature-number {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    width: 36px;\r\n    height: 36px;\r\n\r\n    margin: 0 auto 14px;\r\n\r\n    border: 1px solid rgba(74,222,128,.13);\r\n    border-radius: 9px;\r\n\r\n    background: rgba(34,197,94,.09);\r\n    color: var(--pw-green-light);\r\n\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n}\r\n\r\n.pw-feature strong {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n}\r\n\r\n.pw-feature span {\r\n    display: block;\r\n\r\n    color: var(--pw-sub);\r\n\r\n    font-size: 13px;\r\n    line-height: 1.55;\r\n}\r\n\r\n.pw-hero-actions {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n\r\n    gap: 13px;\r\n}\r\n\r\n.pw-btn {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    min-width: 220px;\r\n    min-height: 56px;\r\n\r\n    padding: 15px 28px;\r\n\r\n    border-radius: 12px;\r\n\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n\r\n    text-decoration: none !important;\r\n\r\n    transition:\r\n        transform .2s ease,\r\n        box-shadow .2s ease,\r\n        border-color .2s ease;\r\n}\r\n\r\n.pw-btn-primary {\r\n    color: #041008 !important;\r\n\r\n    background: linear-gradient(\r\n        135deg,\r\n        #4ade80,\r\n        #22c55e\r\n    );\r\n\r\n    box-shadow: 0 12px 35px rgba(34,197,94,.20);\r\n}\r\n\r\n.pw-btn-primary:hover {\r\n    color: #041008 !important;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 16px 45px rgba(34,197,94,.30);\r\n}\r\n\r\n.pw-btn-secondary {\r\n    color: #ffffff !important;\r\n    background: rgba(255,255,255,.035);\r\n\r\n    border: 1px solid rgba(255,255,255,.12);\r\n\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.pw-btn-secondary:hover {\r\n    color: #ffffff !important;\r\n    transform: translateY(-2px);\r\n    border-color: rgba(74,222,128,.38);\r\n}\r\n\r\n.pw-hero-note {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n\r\n    gap: 8px;\r\n    margin-top: 24px;\r\n\r\n    color: #748078;\r\n\r\n    font-size: 13px;\r\n    line-height: 1.5;\r\n}\r\n\r\n.pw-note-dot {\r\n    color: var(--pw-green);\r\n}\r\n\r\n\r\n\/* TABLET *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .pw-hero {\r\n        padding: 90px 18px 75px;\r\n    }\r\n\r\n    .pw-hero h1 {\r\n        font-size: clamp(42px, 8vw, 62px);\r\n        letter-spacing: -1.8px;\r\n    }\r\n\r\n    .pw-hero-features {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .pw-hero {\r\n        padding: 70px 16px 58px;\r\n\r\n        background:\r\n            repeating-linear-gradient(\r\n                0deg,\r\n                transparent 0px,\r\n                transparent 59px,\r\n                rgba(74,222,128,.035) 60px\r\n            ),\r\n\r\n            repeating-linear-gradient(\r\n                90deg,\r\n                transparent 0px,\r\n                transparent 59px,\r\n                rgba(74,222,128,.035) 60px\r\n            ),\r\n\r\n            radial-gradient(\r\n                circle at 50% 0%,\r\n                rgba(34,197,94,.19),\r\n                transparent 34%\r\n            ),\r\n\r\n            linear-gradient(\r\n                180deg,\r\n                #07130c 0%,\r\n                #06110b 100%\r\n            );\r\n    }\r\n\r\n    .pw-hero::after {\r\n        top: 48%;\r\n        width: 180%;\r\n        left: -40%;\r\n        opacity: .7;\r\n    }\r\n\r\n    .pw-hero-container {\r\n        width: 100%;\r\n        max-width: 100%;\r\n    }\r\n\r\n    .pw-hero-badge {\r\n        max-width: 100%;\r\n        margin-bottom: 21px;\r\n        padding: 8px 12px;\r\n\r\n        font-size: 11px;\r\n        letter-spacing: .25px;\r\n\r\n        white-space: normal;\r\n        text-align: center;\r\n    }\r\n\r\n    .pw-hero h1 {\r\n        width: 100%;\r\n        margin-bottom: 22px;\r\n\r\n        font-size: clamp(34px, 10vw, 44px);\r\n        line-height: 1.1;\r\n        letter-spacing: -1.1px;\r\n\r\n        overflow-wrap: break-word;\r\n    }\r\n\r\n    .pw-hero-description {\r\n        width: 100%;\r\n        margin-bottom: 31px;\r\n\r\n        font-size: 16.5px;\r\n        line-height: 1.65;\r\n\r\n        overflow-wrap: break-word;\r\n    }\r\n\r\n    .pw-tech-line {\r\n        gap: 6px;\r\n        margin: -7px auto 31px;\r\n    }\r\n\r\n    .pw-tech-line span {\r\n        padding: 6px 9px;\r\n        font-size: 11px;\r\n    }\r\n\r\n    .pw-hero-features {\r\n        grid-template-columns: 1fr;\r\n\r\n        width: 100%;\r\n\r\n        gap: 10px;\r\n        margin-bottom: 32px;\r\n    }\r\n\r\n    .pw-feature {\r\n        width: 100%;\r\n        padding: 18px 14px;\r\n    }\r\n\r\n    .pw-feature-number {\r\n        width: 34px;\r\n        height: 34px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .pw-feature strong {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .pw-feature span {\r\n        font-size: 12.5px;\r\n    }\r\n\r\n    .pw-hero-actions {\r\n        flex-direction: column;\r\n        width: 100%;\r\n    }\r\n\r\n    .pw-btn {\r\n        width: 100%;\r\n        max-width: 390px;\r\n        min-height: 54px;\r\n    }\r\n\r\n    .pw-hero-note {\r\n        margin-top: 20px;\r\n        font-size: 12px;\r\n    }\r\n}\r\n\r\n\r\n\/* SMALL PHONES *\/\r\n\r\n@media (max-width: 360px) {\r\n\r\n    .pw-hero {\r\n        padding-left: 12px;\r\n        padding-right: 12px;\r\n    }\r\n\r\n    .pw-hero h1 {\r\n        font-size: 32px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pw-hero\">\r\n\r\n\r\n<div class=\"pw-hero-container\">\r\n\r\n    <div class=\"pw-hero-badge\">\r\n        \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0438\u0439 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441 \u2022 QA Automation\r\n    <\/div>\r\n\r\n\r\n    <h1>\r\n        \u041a\u0443\u0440\u0441 Playwright + TypeScript\r\n        <span class=\"pw-accent\">\r\n            \u0434\u043b\u044f QA Automation Engineer\r\n        <\/span>\r\n    <\/h1>\r\n\r\n\r\n    <p class=\"pw-hero-description\">\r\n\r\n        \u041e\u043f\u0430\u043d\u0443\u0439\u0442\u0435\r\n        <strong>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0430 Playwright<\/strong>\r\n        \u0442\u0430 \u043d\u0430\u0432\u0447\u0456\u0442\u044c\u0441\u044f \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0456\r\n        <strong>UI, API \u0442\u0430 E2E \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u043d\u0430 TypeScript<\/strong>.\r\n\r\n        \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u043e\u0454\u043a\u0442\u0430\u0445, \u0441\u0443\u0447\u0430\u0441\u043d\u0430 \u0430\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0430\r\n        \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432 \u0442\u0430 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0438, \u044f\u043a\u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c\r\n        Automation QA Engineer \u0443 \u043a\u043e\u043c\u0435\u0440\u0446\u0456\u0439\u043d\u0438\u0445 \u043f\u0440\u043e\u0454\u043a\u0442\u0430\u0445.\r\n\r\n    <\/p>\r\n\r\n\r\n    <div class=\"pw-tech-line\">\r\n\r\n        <span>Playwright<\/span>\r\n\r\n        <span>TypeScript<\/span>\r\n\r\n        <span>API Testing<\/span>\r\n\r\n        <span>Page Object<\/span>\r\n\r\n        <span>Git<\/span>\r\n\r\n        <span>CI\/CD<\/span>\r\n\r\n        <span>Allure<\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"pw-hero-features\">\r\n\r\n\r\n        <div class=\"pw-feature\">\r\n\r\n            <div class=\"pw-feature-number\">\r\n                01\r\n            <\/div>\r\n\r\n            <strong>\r\n                Playwright + TypeScript\r\n            <\/strong>\r\n\r\n            <span>\r\n                \u0421\u0443\u0447\u0430\u0441\u043d\u0438\u0439 \u0441\u0442\u0435\u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f\r\n                \u0434\u043b\u044f QA Engineer\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pw-feature\">\r\n\r\n            <div class=\"pw-feature-number\">\r\n                02\r\n            <\/div>\r\n\r\n            <strong>\r\n                \u0420\u0435\u0430\u043b\u044c\u043d\u0456 \u043f\u0440\u043e\u0454\u043a\u0442\u0438\r\n            <\/strong>\r\n\r\n            <span>\r\n                \u041f\u0438\u0448\u0435\u043c\u043e \u0441\u043f\u0440\u0430\u0432\u0436\u043d\u0456 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u0437\u0430\u043c\u0456\u0441\u0442\u044c\r\n                \u0432\u0438\u0432\u0447\u0435\u043d\u043d\u044f \u043b\u0438\u0448\u0435 \u0442\u0435\u043e\u0440\u0456\u0457\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pw-feature\">\r\n\r\n            <div class=\"pw-feature-number\">\r\n                03\r\n            <\/div>\r\n\r\n            <strong>\r\n                UI + API Testing\r\n            <\/strong>\r\n\r\n            <span>\r\n                \u0421\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u043f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u0456 End-to-End\r\n                \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pw-feature\">\r\n\r\n            <div class=\"pw-feature-number\">\r\n                04\r\n            <\/div>\r\n\r\n            <strong>\r\n                Automation Framework\r\n            <\/strong>\r\n\r\n            <span>\r\n                Page Object Model, Fixtures,\r\n                \u0437\u0432\u0456\u0442\u0438 \u0442\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0454\u043a\u0442\u0443\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"pw-hero-actions\">\r\n\r\n        <a\r\n            href=\"#register\"\r\n            class=\"pw-btn pw-btn-primary\"\r\n        >\r\n            \u0417\u0430\u043f\u0438\u0441\u0430\u0442\u0438\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0431\u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u0442\u044f\r\n        <\/a>\r\n\r\n\r\n        <a\r\n            href=\"#program\"\r\n            class=\"pw-btn pw-btn-secondary\"\r\n        >\r\n            \u041f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"pw-hero-note\">\r\n\r\n        <span>\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043d\u044f\u0442\u0442\u044f<\/span>\r\n\r\n        <span class=\"pw-note-dot\">\u2022<\/span>\r\n\r\n        <span>\u0416\u0438\u0432\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430<\/span>\r\n\r\n        <span class=\"pw-note-dot\">\u2022<\/span>\r\n\r\n        <span>\u0417\u0432\u043e\u0440\u043e\u0442\u043d\u0438\u0439 \u0437\u0432'\u044f\u0437\u043e\u043a \u0432\u0456\u0434 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0430<\/span>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/section>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b556602 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"b556602\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-82b3271\" data-id=\"82b3271\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9f1d09d elementor-widget elementor-widget-html\" data-id=\"9f1d09d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* ==================================================\r\n   PLAYWRIGHT COURSE \u2014 LIGHT AUDIENCE SECTION\r\n   Elementor HTML Widget\r\n================================================== *\/\r\n\r\n.pw-audience-light {\r\n    position: relative;\r\n    overflow: hidden;\r\n\r\n    padding: 100px 20px;\r\n\r\n    color: #102117;\r\n    font-family: inherit;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 12% 18%,\r\n            rgba(34,197,94,.10),\r\n            transparent 24%\r\n        ),\r\n        radial-gradient(\r\n            circle at 85% 75%,\r\n            rgba(74,222,128,.09),\r\n            transparent 28%\r\n        ),\r\n        linear-gradient(\r\n            180deg,\r\n            #f8fcf9 0%,\r\n            #f2f9f4 50%,\r\n            #f8fcf9 100%\r\n        );\r\n\r\n    background-attachment: fixed;\r\n}\r\n\r\n.pw-audience-light * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   TECH GRID\r\n================================================== *\/\r\n\r\n.pw-audience-light::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            rgba(22,163,74,.055) 1px,\r\n            transparent 1px\r\n        ),\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(22,163,74,.055) 1px,\r\n            transparent 1px\r\n        );\r\n\r\n    background-size: 72px 72px;\r\n\r\n    -webkit-mask-image: linear-gradient(\r\n        to bottom,\r\n        transparent,\r\n        #000 14%,\r\n        #000 86%,\r\n        transparent\r\n    );\r\n\r\n    mask-image: linear-gradient(\r\n        to bottom,\r\n        transparent,\r\n        #000 14%,\r\n        #000 86%,\r\n        transparent\r\n    );\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   BIG ORBIT\r\n================================================== *\/\r\n\r\n.pw-audience-light::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 900px;\r\n    height: 900px;\r\n\r\n    right: -470px;\r\n    top: -330px;\r\n\r\n    border: 1px solid rgba(22,163,74,.14);\r\n    border-radius: 50%;\r\n\r\n    box-shadow:\r\n        0 0 100px rgba(34,197,94,.06),\r\n        inset 0 0 100px rgba(34,197,94,.025);\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   DECORATIVE GLOW\r\n================================================== *\/\r\n\r\n.pw-light-orb {\r\n    position: absolute;\r\n\r\n    width: 480px;\r\n    height: 480px;\r\n\r\n    left: -210px;\r\n    bottom: -160px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(34,197,94,.15) 0%,\r\n            rgba(74,222,128,.07) 38%,\r\n            transparent 72%\r\n        );\r\n\r\n    filter: blur(15px);\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   SECOND ORBIT\r\n================================================== *\/\r\n\r\n.pw-light-orbit-small {\r\n    position: absolute;\r\n\r\n    width: 350px;\r\n    height: 350px;\r\n\r\n    left: 7%;\r\n    top: 16%;\r\n\r\n    border: 1px solid rgba(22,163,74,.09);\r\n    border-radius: 50%;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-light-orbit-small::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 8px;\r\n    height: 8px;\r\n\r\n    top: 50%;\r\n    right: -4px;\r\n\r\n    transform: translateY(-50%);\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22c55e;\r\n\r\n    box-shadow:\r\n        0 0 16px rgba(34,197,94,.65),\r\n        0 0 35px rgba(34,197,94,.22);\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   CONTAINER\r\n================================================== *\/\r\n\r\n.pw-audience-light-container {\r\n    position: relative;\r\n    z-index: 3;\r\n\r\n    width: 100%;\r\n    max-width: 1180px;\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   HEADING\r\n================================================== *\/\r\n\r\n.pw-audience-light-head {\r\n    max-width: 860px;\r\n\r\n    margin: 0 auto 58px;\r\n\r\n    text-align: center;\r\n}\r\n\r\n.pw-light-badge {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 8px;\r\n\r\n    margin-bottom: 18px;\r\n\r\n    padding: 8px 15px;\r\n\r\n    border: 1px solid rgba(22,163,74,.18);\r\n    border-radius: 100px;\r\n\r\n    background: rgba(34,197,94,.07);\r\n\r\n    color: #15803d;\r\n\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: .5px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-light-badge::before {\r\n    content: \"\";\r\n\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22c55e;\r\n\r\n    box-shadow: 0 0 10px rgba(34,197,94,.45);\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   H2\r\n================================================== *\/\r\n\r\n.pw-audience-light h2 {\r\n    margin: 0 0 20px;\r\n\r\n    color: #102117;\r\n\r\n    font-size: clamp(34px, 5vw, 54px);\r\n    line-height: 1.12;\r\n\r\n    font-weight: 800;\r\n\r\n    letter-spacing: -1.5px;\r\n}\r\n\r\n.pw-audience-light h2 span {\r\n    color: #16a34a;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   INTRO\r\n================================================== *\/\r\n\r\n.pw-audience-light-intro {\r\n    margin: 0 auto;\r\n\r\n    color: #607066;\r\n\r\n    font-size: 18px;\r\n    line-height: 1.75;\r\n}\r\n\r\n.pw-audience-light-intro strong {\r\n    color: #193521;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   GRID\r\n================================================== *\/\r\n\r\n.pw-audience-light-grid {\r\n    display: grid;\r\n\r\n    grid-template-columns: repeat(2, 1fr);\r\n\r\n    gap: 18px;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   CARD\r\n================================================== *\/\r\n\r\n.pw-audience-light-card {\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n\r\n    min-height: 260px;\r\n\r\n    padding: 30px;\r\n\r\n    border: 1px solid rgba(22,163,74,.11);\r\n\r\n    border-radius: 20px;\r\n\r\n    background: rgba(255,255,255,.88);\r\n\r\n    box-shadow:\r\n        0 14px 40px rgba(30,70,45,.07);\r\n\r\n    backdrop-filter: blur(10px);\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        border-color .25s ease,\r\n        box-shadow .25s ease;\r\n}\r\n\r\n.pw-audience-light-card::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 28px;\r\n\r\n    width: 95px;\r\n    height: 2px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            #22c55e,\r\n            rgba(34,197,94,.35),\r\n            transparent\r\n        );\r\n}\r\n\r\n.pw-audience-light-card::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 140px;\r\n    height: 140px;\r\n\r\n    right: -70px;\r\n    bottom: -70px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(34,197,94,.08),\r\n            transparent 70%\r\n        );\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-audience-light-card:hover {\r\n    transform: translateY(-6px);\r\n\r\n    border-color: rgba(22,163,74,.26);\r\n\r\n    box-shadow:\r\n        0 20px 55px rgba(30,70,45,.11);\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   CARD NUMBER\r\n================================================== *\/\r\n\r\n.pw-audience-light-number {\r\n    margin-bottom: 22px;\r\n\r\n    color: #16a34a;\r\n\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: 1px;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   CARD CONTENT\r\n================================================== *\/\r\n\r\n.pw-audience-light-card h3 {\r\n    margin: 0 0 13px;\r\n\r\n    color: #102117;\r\n\r\n    font-size: 22px;\r\n    font-weight: 750;\r\n\r\n    line-height: 1.28;\r\n}\r\n\r\n.pw-audience-light-card p {\r\n    margin: 0;\r\n\r\n    color: #647168;\r\n\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n}\r\n\r\n.pw-audience-light-card strong {\r\n    color: #24452d;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   BOTTOM INFO\r\n================================================== *\/\r\n\r\n.pw-audience-light-bottom {\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n\r\n    margin-top: 24px;\r\n\r\n    padding: 25px 28px;\r\n\r\n    border: 1px solid rgba(22,163,74,.14);\r\n\r\n    border-radius: 17px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(34,197,94,.075),\r\n            rgba(255,255,255,.80),\r\n            rgba(34,197,94,.055)\r\n        );\r\n\r\n    text-align: center;\r\n\r\n    box-shadow:\r\n        0 12px 35px rgba(30,70,45,.05);\r\n}\r\n\r\n.pw-audience-light-bottom::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 20%;\r\n\r\n    width: 60%;\r\n    height: 1px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            rgba(22,163,74,.35),\r\n            transparent\r\n        );\r\n}\r\n\r\n.pw-audience-light-bottom p {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    max-width: 900px;\r\n\r\n    margin: 0 auto;\r\n\r\n    color: #5e6f63;\r\n\r\n    font-size: 16px;\r\n    line-height: 1.7;\r\n}\r\n\r\n.pw-audience-light-bottom strong {\r\n    color: #16311e;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   TABLET\r\n================================================== *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .pw-audience-light {\r\n        padding: 80px 18px;\r\n    }\r\n\r\n    .pw-audience-light::after {\r\n        width: 650px;\r\n        height: 650px;\r\n\r\n        right: -380px;\r\n        top: -190px;\r\n    }\r\n\r\n    .pw-light-orbit-small {\r\n        width: 280px;\r\n        height: 280px;\r\n\r\n        left: -80px;\r\n    }\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   MOBILE\r\n================================================== *\/\r\n\r\n@media (max-width: 768px) {\r\n\r\n    .pw-audience-light {\r\n        background-attachment: scroll;\r\n    }\r\n\r\n    .pw-audience-light::before {\r\n        background-size: 50px 50px;\r\n        opacity: .75;\r\n    }\r\n\r\n    .pw-audience-light-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .pw-audience-light-card {\r\n        min-height: auto;\r\n    }\r\n\r\n    .pw-light-orbit-small {\r\n        display: none;\r\n    }\r\n\r\n    .pw-light-orb {\r\n        width: 320px;\r\n        height: 320px;\r\n\r\n        left: -190px;\r\n        bottom: -90px;\r\n    }\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   SMALL MOBILE\r\n================================================== *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .pw-audience-light {\r\n        padding: 64px 16px;\r\n    }\r\n\r\n    .pw-audience-light::after {\r\n        width: 500px;\r\n        height: 500px;\r\n\r\n        right: -340px;\r\n        top: -130px;\r\n\r\n        opacity: .65;\r\n    }\r\n\r\n    .pw-audience-light-head {\r\n        margin-bottom: 38px;\r\n    }\r\n\r\n    .pw-light-badge {\r\n        font-size: 11px;\r\n        padding: 7px 12px;\r\n    }\r\n\r\n    .pw-audience-light h2 {\r\n        font-size: 35px;\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .pw-audience-light-intro {\r\n        font-size: 16px;\r\n        line-height: 1.65;\r\n    }\r\n\r\n    .pw-audience-light-grid {\r\n        gap: 12px;\r\n    }\r\n\r\n    .pw-audience-light-card {\r\n        padding: 23px 20px;\r\n        border-radius: 16px;\r\n    }\r\n\r\n    .pw-audience-light-number {\r\n        margin-bottom: 15px;\r\n        font-size: 12px;\r\n    }\r\n\r\n    .pw-audience-light-card h3 {\r\n        font-size: 19px;\r\n    }\r\n\r\n    .pw-audience-light-card p {\r\n        font-size: 14px;\r\n    }\r\n\r\n    .pw-audience-light-bottom {\r\n        padding: 20px 17px;\r\n    }\r\n\r\n    .pw-audience-light-bottom p {\r\n        font-size: 14px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pw-audience-light\">\r\n\r\n\r\n<div class=\"pw-light-orb\"><\/div>\r\n<div class=\"pw-light-orbit-small\"><\/div>\r\n\r\n<div class=\"pw-audience-light-container\">\r\n\r\n    <div class=\"pw-audience-light-head\">\r\n\r\n        <div class=\"pw-light-badge\">\r\n            \u0414\u043b\u044f \u043a\u043e\u0433\u043e \u0446\u0435\u0439 \u043a\u0443\u0440\u0441\r\n        <\/div>\r\n\r\n        <h2>\r\n            \u041a\u043e\u043c\u0443 \u043f\u0456\u0434\u0456\u0439\u0434\u0435 \u043a\u0443\u0440\u0441\r\n            <span>Playwright + TypeScript<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"pw-audience-light-intro\">\r\n            \u041a\u0443\u0440\u0441 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0439 \u0434\u043b\u044f QA Engineer, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u043e\u043f\u0430\u043d\u0443\u0432\u0430\u0442\u0438\r\n            <strong>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0430 Playwright<\/strong>,\r\n            \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0437 Manual QA \u0432 Automation \u0430\u0431\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438\r\n            \u0432\u0436\u0435 \u043d\u0430\u044f\u0432\u043d\u0456 \u0437\u043d\u0430\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"pw-audience-light-grid\">\r\n\r\n        <article class=\"pw-audience-light-card\">\r\n\r\n            <div class=\"pw-audience-light-number\">\r\n                01 \/ MANUAL QA\r\n            <\/div>\r\n\r\n            <h3>\r\n                Manual QA, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 Automation\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u042f\u043a\u0449\u043e \u0432\u0438 \u0432\u0436\u0435 \u043f\u0440\u0430\u0446\u044e\u0454\u0442\u0435 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043b\u044c\u043d\u0438\u043a\u043e\u043c \u0456 \u0445\u043e\u0447\u0435\u0442\u0435 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f\r\n                \u043f\u0438\u0441\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438, \u043a\u0443\u0440\u0441 \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432\u0456\u0434 \u0440\u0443\u0447\u043d\u043e\u0433\u043e\r\n                \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043e\r\n                <strong>Playwright + TypeScript<\/strong>\r\n                \u043f\u043e\u0441\u043b\u0456\u0434\u043e\u0432\u043d\u043e \u0442\u0430 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0446\u0456.\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n\r\n        <article class=\"pw-audience-light-card\">\r\n\r\n            <div class=\"pw-audience-light-number\">\r\n                02 \/ JUNIOR AUTOMATION\r\n            <\/div>\r\n\r\n            <h3>\r\n                Junior Automation QA Engineer\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043a\u0440\u0430\u0449\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443\u0432\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438,\r\n                \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 Page Object Model, Fixtures,\r\n                API Testing \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0431\u0456\u043b\u044c\u0448 \u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0438\u0439\r\n                <strong>Automation Framework<\/strong>.\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n\r\n        <article class=\"pw-audience-light-card\">\r\n\r\n            <div class=\"pw-audience-light-number\">\r\n                03 \/ SELENIUM & CYPRESS\r\n            <\/div>\r\n\r\n            <h3>\r\n                QA, \u044f\u043a\u0456 \u043f\u0440\u0430\u0446\u044e\u044e\u0442\u044c \u0456\u0437 Selenium \u0430\u0431\u043e Cypress\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u042f\u043a\u0449\u043e \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u0454 \u0434\u043e\u0441\u0432\u0456\u0434 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457, \u043a\u0443\u0440\u0441 \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435\r\n                \u0448\u0432\u0438\u0434\u043a\u043e \u043e\u0441\u0432\u043e\u0457\u0442\u0438 <strong>Playwright<\/strong>, \u0439\u043e\u0433\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438,\r\n                auto-waiting, browser context, API \u0442\u0430 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434\r\n                \u0434\u043e End-to-End \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f.\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n\r\n        <article class=\"pw-audience-light-card\">\r\n\r\n            <div class=\"pw-audience-light-number\">\r\n                04 \/ QA ENGINEER\r\n            <\/div>\r\n\r\n            <h3>\r\n                QA Engineer, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0439 \u0441\u0442\u0435\u043a\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u041a\u0443\u0440\u0441 \u043f\u0456\u0434\u0456\u0439\u0434\u0435 \u0442\u0438\u043c, \u0445\u0442\u043e \u0445\u043e\u0447\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437\r\n                <strong>\r\n                    TypeScript, Playwright, Git, CI\/CD \u0442\u0430 Allure\r\n                <\/strong>\r\n                \u0456 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u0442\u0430\u043a, \u044f\u043a \u0446\u0435 \u0440\u043e\u0431\u0438\u0442\u044c\u0441\u044f\r\n                \u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0445 \u043a\u043e\u043c\u0435\u0440\u0446\u0456\u0439\u043d\u0438\u0445 \u043f\u0440\u043e\u0454\u043a\u0442\u0430\u0445.\r\n            <\/p>\r\n\r\n        <\/article>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"pw-audience-light-bottom\">\r\n\r\n        <p>\r\n            <strong>\r\n                \u041d\u0435 \u043e\u0431\u043e\u0432'\u044f\u0437\u043a\u043e\u0432\u043e \u0432\u0436\u0435 \u0431\u0443\u0442\u0438 Automation QA.\r\n            <\/strong>\r\n\r\n            \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u0430 \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0430 \u0442\u0430\u043a, \u0449\u043e\u0431 \u0432\u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u043e\u0432\u043e \u043f\u0435\u0440\u0435\u0439\u0448\u043b\u0438\r\n            \u0432\u0456\u0434 \u0431\u0430\u0437\u043e\u0432\u0438\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0456\u0432 Playwright \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f\r\n            \u043f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/section>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7cf46fe elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"7cf46fe\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ddd341d\" data-id=\"ddd341d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-644a995 elementor-widget elementor-widget-html\" data-id=\"644a995\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* ==================================================\r\n   PLAYWRIGHT COURSE \u2014 SKILLS \/ CODE SECTION\r\n   Elementor HTML Widget\r\n================================================== *\/\r\n\r\n.pw-skills {\r\n    position: relative;\r\n    overflow: hidden;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    padding: 110px 20px;\r\n\r\n    font-family: inherit;\r\n    color: #102117;\r\n\r\n    background:\r\n        radial-gradient(circle at 78% 35%, rgba(34,197,94,.11), transparent 27%),\r\n        radial-gradient(circle at 10% 85%, rgba(74,222,128,.07), transparent 25%),\r\n        linear-gradient(135deg, #ffffff 0%, #f5faf6 55%, #eef8f1 100%);\r\n}\r\n\r\n.pw-skills,\r\n.pw-skills * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-skills * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-skills::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        repeating-linear-gradient(\r\n            120deg,\r\n            transparent 0,\r\n            transparent 90px,\r\n            rgba(22,163,74,.035) 91px,\r\n            transparent 92px\r\n        );\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-skills::after {\r\n    content: \"PLAYWRIGHT\";\r\n\r\n    position: absolute;\r\n\r\n    right: -35px;\r\n    top: 40px;\r\n\r\n    color: rgba(22,163,74,.035);\r\n\r\n    font-size: clamp(90px, 13vw, 210px);\r\n    font-weight: 900;\r\n\r\n    letter-spacing: -8px;\r\n\r\n    white-space: nowrap;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-skills-container {\r\n    position: relative;\r\n    z-index: 3;\r\n\r\n    width: 100%;\r\n    max-width: 1220px;\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n.pw-skills-head {\r\n    width: 100%;\r\n    max-width: 850px;\r\n\r\n    margin: 0 auto 65px;\r\n\r\n    text-align: center;\r\n}\r\n\r\n.pw-skills-badge {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 8px;\r\n\r\n    margin-bottom: 18px;\r\n    padding: 8px 15px;\r\n\r\n    border: 1px solid rgba(22,163,74,.18);\r\n    border-radius: 100px;\r\n\r\n    background: rgba(34,197,94,.07);\r\n\r\n    color: #15803d;\r\n\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: .6px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-skills-badge::before {\r\n    content: \"\";\r\n\r\n    flex: 0 0 auto;\r\n\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22c55e;\r\n\r\n    box-shadow: 0 0 10px rgba(34,197,94,.5);\r\n}\r\n\r\n.pw-skills h2 {\r\n    margin: 0 0 20px;\r\n\r\n    color: #102117;\r\n\r\n    font-size: clamp(36px, 5vw, 56px);\r\n    line-height: 1.1;\r\n\r\n    font-weight: 800;\r\n\r\n    letter-spacing: -1.7px;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-skills h2 span {\r\n    color: #16a34a;\r\n}\r\n\r\n.pw-skills-subtitle {\r\n    width: 100%;\r\n    max-width: 780px;\r\n\r\n    margin: 0 auto;\r\n\r\n    color: #607066;\r\n\r\n    font-size: 18px;\r\n    line-height: 1.75;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-skills-subtitle strong {\r\n    color: #193521;\r\n}\r\n\r\n.pw-skills-layout {\r\n    display: grid;\r\n\r\n    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);\r\n\r\n    gap: 50px;\r\n\r\n    align-items: center;\r\n\r\n    width: 100%;\r\n}\r\n\r\n.pw-skills-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    gap: 10px;\r\n\r\n    min-width: 0;\r\n}\r\n\r\n.pw-skill-item {\r\n    display: grid;\r\n\r\n    grid-template-columns: 48px minmax(0, 1fr);\r\n\r\n    gap: 17px;\r\n\r\n    align-items: start;\r\n\r\n    width: 100%;\r\n\r\n    padding: 17px 18px;\r\n\r\n    border: 1px solid transparent;\r\n    border-radius: 16px;\r\n\r\n    transition:\r\n        background .25s ease,\r\n        border-color .25s ease,\r\n        transform .25s ease;\r\n}\r\n\r\n.pw-skill-item:hover {\r\n    transform: translateX(6px);\r\n\r\n    border-color: rgba(22,163,74,.12);\r\n\r\n    background: rgba(255,255,255,.72);\r\n}\r\n\r\n.pw-skill-icon {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    width: 48px;\r\n    height: 48px;\r\n\r\n    border: 1px solid rgba(22,163,74,.13);\r\n    border-radius: 14px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(34,197,94,.12),\r\n            rgba(34,197,94,.035)\r\n        );\r\n\r\n    color: #16a34a;\r\n\r\n    font-size: 17px;\r\n    font-weight: 800;\r\n}\r\n\r\n.pw-skill-content {\r\n    min-width: 0;\r\n}\r\n\r\n.pw-skill-content h3 {\r\n    margin: 1px 0 5px;\r\n\r\n    color: #13291a;\r\n\r\n    font-size: 18px;\r\n    font-weight: 750;\r\n\r\n    line-height: 1.35;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-skill-content p {\r\n    margin: 0;\r\n\r\n    color: #66746a;\r\n\r\n    font-size: 14px;\r\n    line-height: 1.65;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-code-wrap {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-code-wrap::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 85%;\r\n    height: 85%;\r\n\r\n    left: 8%;\r\n    top: 10%;\r\n\r\n    border-radius: 40%;\r\n\r\n    background: rgba(34,197,94,.14);\r\n\r\n    filter: blur(70px);\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-code-window {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    overflow: hidden;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    border: 1px solid rgba(255,255,255,.10);\r\n    border-radius: 22px;\r\n\r\n    background: #08110c;\r\n\r\n    box-shadow:\r\n        0 30px 70px rgba(20,50,30,.20),\r\n        0 8px 20px rgba(20,50,30,.10);\r\n}\r\n\r\n.pw-code-header {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    gap: 14px;\r\n\r\n    min-height: 52px;\r\n\r\n    padding: 0 18px;\r\n\r\n    border-bottom: 1px solid rgba(255,255,255,.07);\r\n\r\n    background: #0c1710;\r\n}\r\n\r\n.pw-window-dots {\r\n    display: flex;\r\n    flex: 0 0 auto;\r\n    gap: 7px;\r\n}\r\n\r\n.pw-window-dot {\r\n    width: 9px;\r\n    height: 9px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: rgba(255,255,255,.18);\r\n}\r\n\r\n.pw-window-dot:nth-child(1) {\r\n    background: #ff605c;\r\n}\r\n\r\n.pw-window-dot:nth-child(2) {\r\n    background: #ffbd44;\r\n}\r\n\r\n.pw-window-dot:nth-child(3) {\r\n    background: #00ca4e;\r\n}\r\n\r\n.pw-code-file {\r\n    min-width: 0;\r\n\r\n    color: #91a497;\r\n\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n.pw-code-tabs {\r\n    display: flex;\r\n\r\n    width: 100%;\r\n\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n\r\n    border-bottom: 1px solid rgba(255,255,255,.055);\r\n\r\n    background: #09130d;\r\n\r\n    scrollbar-width: none;\r\n}\r\n\r\n.pw-code-tabs::-webkit-scrollbar {\r\n    display: none;\r\n}\r\n\r\n.pw-code-tab {\r\n    position: relative;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    padding: 12px 18px;\r\n\r\n    color: #9aac9f;\r\n\r\n    font-size: 12px;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n.pw-code-tab.active {\r\n    color: #e8f5ec;\r\n\r\n    background: #08110c;\r\n}\r\n\r\n.pw-code-tab.active::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n\r\n    height: 2px;\r\n\r\n    background: #22c55e;\r\n}\r\n\r\n.pw-code {\r\n    width: 100%;\r\n    max-width: 100%;\r\n\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n\r\n    padding: 26px 25px 30px;\r\n\r\n    color: #d6e2d9;\r\n\r\n    font-family:\r\n        \"SFMono-Regular\",\r\n        Consolas,\r\n        \"Liberation Mono\",\r\n        Menlo,\r\n        monospace;\r\n\r\n    font-size: 13px;\r\n    line-height: 1.85;\r\n\r\n    white-space: pre;\r\n\r\n    -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n.pw-code::-webkit-scrollbar {\r\n    height: 5px;\r\n}\r\n\r\n.pw-code::-webkit-scrollbar-thumb {\r\n    border-radius: 10px;\r\n    background: rgba(74,222,128,.22);\r\n}\r\n\r\n.pw-code .keyword {\r\n    color: #c084fc;\r\n}\r\n\r\n.pw-code .string {\r\n    color: #86efac;\r\n}\r\n\r\n.pw-code .method {\r\n    color: #67e8f9;\r\n}\r\n\r\n.pw-code .function {\r\n    color: #fde68a;\r\n}\r\n\r\n.pw-code .comment {\r\n    color: #607066;\r\n}\r\n\r\n.pw-code .variable {\r\n    color: #93c5fd;\r\n}\r\n\r\n.pw-code-footer {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    gap: 15px;\r\n\r\n    padding: 13px 18px;\r\n\r\n    border-top: 1px solid rgba(255,255,255,.06);\r\n\r\n    background: #0c1710;\r\n}\r\n\r\n.pw-code-status {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 7px;\r\n\r\n    min-width: 0;\r\n\r\n    color: #9caf9f;\r\n\r\n    font-size: 11px;\r\n}\r\n\r\n.pw-code-status::before {\r\n    content: \"\";\r\n\r\n    flex: 0 0 auto;\r\n\r\n    width: 7px;\r\n    height: 7px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22c55e;\r\n\r\n    box-shadow: 0 0 8px rgba(34,197,94,.7);\r\n}\r\n\r\n.pw-code-stack {\r\n    color: #708077;\r\n\r\n    font-size: 11px;\r\n\r\n    text-align: right;\r\n}\r\n\r\n.pw-result-row {\r\n    display: grid;\r\n\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n\r\n    gap: 10px;\r\n\r\n    margin-top: 15px;\r\n\r\n    width: 100%;\r\n}\r\n\r\n.pw-result {\r\n    min-width: 0;\r\n\r\n    padding: 14px 10px;\r\n\r\n    border: 1px solid rgba(22,163,74,.11);\r\n    border-radius: 13px;\r\n\r\n    background: rgba(255,255,255,.82);\r\n\r\n    text-align: center;\r\n\r\n    box-shadow:\r\n        0 8px 25px rgba(30,70,45,.05);\r\n}\r\n\r\n.pw-result strong {\r\n    display: block;\r\n\r\n    margin-bottom: 3px;\r\n\r\n    color: #16a34a;\r\n\r\n    font-size: 15px;\r\n}\r\n\r\n.pw-result span {\r\n    display: block;\r\n\r\n    color: #718078;\r\n\r\n    font-size: 11px;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n@media (max-width: 1000px) {\r\n\r\n    .pw-skills {\r\n        padding: 85px 18px;\r\n    }\r\n\r\n    .pw-skills-layout {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 45px;\r\n    }\r\n\r\n    .pw-skills-list {\r\n        display: grid;\r\n\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n        gap: 10px;\r\n    }\r\n\r\n    .pw-skill-item:hover {\r\n        transform: translateY(-3px);\r\n    }\r\n\r\n    .pw-code-wrap {\r\n        width: 100%;\r\n        max-width: 760px;\r\n\r\n        margin: 0 auto;\r\n    }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .pw-skills {\r\n        padding: 68px 16px;\r\n\r\n        background:\r\n            radial-gradient(circle at 85% 25%, rgba(34,197,94,.09), transparent 25%),\r\n            linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);\r\n    }\r\n\r\n    .pw-skills::before {\r\n        opacity: .55;\r\n\r\n        background:\r\n            repeating-linear-gradient(\r\n                120deg,\r\n                transparent 0,\r\n                transparent 55px,\r\n                rgba(22,163,74,.025) 56px,\r\n                transparent 57px\r\n            );\r\n    }\r\n\r\n    .pw-skills::after {\r\n        content: \"PW\";\r\n\r\n        top: 18px;\r\n        right: 10px;\r\n\r\n        font-size: 88px;\r\n        letter-spacing: -6px;\r\n\r\n        color: rgba(22,163,74,.045);\r\n    }\r\n\r\n    .pw-skills-head {\r\n        margin-bottom: 42px;\r\n\r\n        text-align: left;\r\n    }\r\n\r\n    .pw-skills-badge {\r\n        margin-bottom: 15px;\r\n\r\n        font-size: 10px;\r\n\r\n        padding: 7px 11px;\r\n    }\r\n\r\n    .pw-skills h2 {\r\n        margin-bottom: 16px;\r\n\r\n        font-size: clamp(31px, 9vw, 38px);\r\n        line-height: 1.08;\r\n\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .pw-skills h2 span {\r\n        display: block;\r\n\r\n        margin-top: 4px;\r\n    }\r\n\r\n    .pw-skills-subtitle {\r\n        font-size: 16px;\r\n        line-height: 1.62;\r\n    }\r\n\r\n    .pw-skills-layout {\r\n        gap: 38px;\r\n    }\r\n\r\n    .pw-skills-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n\r\n        gap: 8px;\r\n    }\r\n\r\n    .pw-skill-item {\r\n        grid-template-columns: 42px minmax(0, 1fr);\r\n\r\n        gap: 13px;\r\n\r\n        padding: 15px 12px;\r\n\r\n        border-color: rgba(22,163,74,.08);\r\n\r\n        background: rgba(255,255,255,.58);\r\n    }\r\n\r\n    .pw-skill-item:hover {\r\n        transform: none;\r\n    }\r\n\r\n    .pw-skill-icon {\r\n        width: 42px;\r\n        height: 42px;\r\n\r\n        border-radius: 12px;\r\n\r\n        font-size: 14px;\r\n    }\r\n\r\n    .pw-skill-content h3 {\r\n        margin-top: 0;\r\n\r\n        font-size: 17px;\r\n        line-height: 1.3;\r\n    }\r\n\r\n    .pw-skill-content p {\r\n        font-size: 13.5px;\r\n        line-height: 1.58;\r\n    }\r\n\r\n    .pw-code-wrap::before {\r\n        width: 80%;\r\n        height: 70%;\r\n\r\n        left: 10%;\r\n        top: 18%;\r\n\r\n        filter: blur(50px);\r\n    }\r\n\r\n    .pw-code-window {\r\n        border-radius: 16px;\r\n\r\n        box-shadow:\r\n            0 18px 45px rgba(20,50,30,.16);\r\n    }\r\n\r\n    .pw-code-header {\r\n        min-height: 46px;\r\n\r\n        padding: 0 13px;\r\n    }\r\n\r\n    .pw-window-dot {\r\n        width: 8px;\r\n        height: 8px;\r\n    }\r\n\r\n    .pw-code-file {\r\n        font-size: 10px;\r\n    }\r\n\r\n    .pw-code-tab {\r\n        padding: 10px 13px;\r\n\r\n        font-size: 10px;\r\n    }\r\n\r\n    .pw-code {\r\n        padding: 18px 14px 22px;\r\n\r\n        font-size: 10.5px;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .pw-code-footer {\r\n        flex-wrap: wrap;\r\n\r\n        gap: 8px;\r\n\r\n        padding: 11px 13px;\r\n    }\r\n\r\n    .pw-code-status,\r\n    .pw-code-stack {\r\n        font-size: 10px;\r\n    }\r\n\r\n    .pw-result-row {\r\n        grid-template-columns: repeat(3, minmax(0, 1fr));\r\n\r\n        gap: 7px;\r\n\r\n        margin-top: 10px;\r\n    }\r\n\r\n    .pw-result {\r\n        padding: 11px 5px;\r\n\r\n        border-radius: 11px;\r\n    }\r\n\r\n    .pw-result strong {\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pw-result span {\r\n        font-size: 9px;\r\n        line-height: 1.3;\r\n    }\r\n}\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .pw-skills {\r\n        padding: 58px 12px;\r\n    }\r\n\r\n    .pw-skills::after {\r\n        font-size: 72px;\r\n    }\r\n\r\n    .pw-skills h2 {\r\n        font-size: 30px;\r\n    }\r\n\r\n    .pw-skills-subtitle {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .pw-skill-item {\r\n        grid-template-columns: 38px minmax(0, 1fr);\r\n\r\n        padding: 13px 9px;\r\n\r\n        gap: 11px;\r\n    }\r\n\r\n    .pw-skill-icon {\r\n        width: 38px;\r\n        height: 38px;\r\n\r\n        font-size: 12px;\r\n    }\r\n\r\n    .pw-skill-content h3 {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .pw-skill-content p {\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pw-code-header {\r\n        padding: 0 10px;\r\n    }\r\n\r\n    .pw-code {\r\n        padding-left: 11px;\r\n        padding-right: 11px;\r\n\r\n        font-size: 9.5px;\r\n    }\r\n\r\n    .pw-result-row {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .pw-result {\r\n        display: flex;\r\n\r\n        align-items: center;\r\n        justify-content: space-between;\r\n\r\n        gap: 10px;\r\n\r\n        padding: 10px 13px;\r\n\r\n        text-align: left;\r\n    }\r\n\r\n    .pw-result strong {\r\n        margin: 0;\r\n    }\r\n\r\n    .pw-result span {\r\n        font-size: 10px;\r\n\r\n        text-align: right;\r\n    }\r\n}\r\n\r\n@media (max-width: 340px) {\r\n\r\n    .pw-skills {\r\n        padding-left: 10px;\r\n        padding-right: 10px;\r\n    }\r\n\r\n    .pw-skills h2 {\r\n        font-size: 27px;\r\n    }\r\n\r\n    .pw-skills-badge {\r\n        max-width: 100%;\r\n    }\r\n\r\n    .pw-code {\r\n        font-size: 9px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pw-skills\">\r\n\r\n\r\n<div class=\"pw-skills-container\">\r\n\r\n    <div class=\"pw-skills-head\">\r\n\r\n        <div class=\"pw-skills-badge\">\r\n            \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n        <\/div>\r\n\r\n        <h2>\r\n            \u0427\u043e\u0433\u043e \u0432\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043d\u0430 \u043a\u0443\u0440\u0441\u0456\r\n            <span>Playwright + TypeScript<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"pw-skills-subtitle\">\r\n            \u0412\u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u0432\u0447\u0438\u0442\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Playwright.\r\n            \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438\r\n            <strong>\u0440\u0435\u0430\u043b\u044c\u043d\u0456 \u043f\u0440\u043e\u0454\u043a\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/strong>\r\n            \u0442\u0430 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u044f\u043a\u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c\r\n            Automation QA Engineer.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"pw-skills-layout\">\r\n\r\n\r\n        <div class=\"pw-skills-list\">\r\n\r\n\r\n            <div class=\"pw-skill-item\">\r\n\r\n                <div class=\"pw-skill-icon\">01<\/div>\r\n\r\n                <div class=\"pw-skill-content\">\r\n                    <h3>\u0421\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 UI \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438<\/h3>\r\n\r\n                    <p>\r\n                        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0456 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457,\r\n                        \u0444\u043e\u0440\u043c\u0438, \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u044e, \u043f\u043e\u0448\u0443\u043a, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0430 \u0456\u043d\u0448\u0456\r\n                        \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438 \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-skill-item\">\r\n\r\n                <div class=\"pw-skill-icon\">02<\/div>\r\n\r\n                <div class=\"pw-skill-content\">\r\n                    <h3>\u041f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438 Playwright<\/h3>\r\n\r\n                    <p>\r\n                        \u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 getByRole, getByText,\r\n                        getByTestId, CSS-\u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438 \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438\r\n                        \u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0456 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0438 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-skill-item\">\r\n\r\n                <div class=\"pw-skill-icon\">03<\/div>\r\n\r\n                <div class=\"pw-skill-content\">\r\n                    <h3>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 API Testing<\/h3>\r\n\r\n                    <p>\r\n                        \u041d\u0430\u0434\u0441\u0438\u043b\u0430\u0442\u0438 API-\u0437\u0430\u043f\u0438\u0442\u0438, \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0442\u0438 response,\r\n                        status code \u0442\u0430 \u0434\u0430\u043d\u0456 \u0431\u0435\u0437\u043f\u043e\u0441\u0435\u0440\u0435\u0434\u043d\u044c\u043e\r\n                        \u0437 Playwright.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-skill-item\">\r\n\r\n                <div class=\"pw-skill-icon\">04<\/div>\r\n\r\n                <div class=\"pw-skill-content\">\r\n                    <h3>\u0421\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 Page Object Model<\/h3>\r\n\r\n                    <p>\r\n                        \u0412\u0438\u043d\u043e\u0441\u0438\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438 \u0442\u0430 \u0434\u0456\u0457 \u0432 Page Object,\r\n                        \u0437\u043c\u0435\u043d\u0448\u0443\u0432\u0430\u0442\u0438 \u0434\u0443\u0431\u043b\u044e\u0432\u0430\u043d\u043d\u044f \u043a\u043e\u0434\u0443 \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438\r\n                        \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u043d\u0443 \u0430\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0442\u0435\u0441\u0442\u0456\u0432.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-skill-item\">\r\n\r\n                <div class=\"pw-skill-icon\">05<\/div>\r\n\r\n                <div class=\"pw-skill-content\">\r\n                    <h3>\u041f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Fixtures \u0456 Hooks<\/h3>\r\n\r\n                    <p>\r\n                        \u041d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0442\u0435\u0441\u0442\u0456\u0432,\r\n                        \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u0430\u043d\u0456 \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438\r\n                        \u0437\u0440\u0443\u0447\u043d\u0443 \u0456\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 automation framework.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-skill-item\">\r\n\r\n                <div class=\"pw-skill-icon\">06<\/div>\r\n\r\n                <div class=\"pw-skill-content\">\r\n                    <h3>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0438 \u0432 CI\/CD<\/h3>\r\n\r\n                    <p>\r\n                        \u041f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Git, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438\r\n                        \u0442\u0430 \u0430\u043d\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438\r\n                        \u0447\u0435\u0440\u0435\u0437 \u0437\u0432\u0456\u0442\u0438 Allure.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pw-code-wrap\">\r\n\r\n            <div class=\"pw-code-window\">\r\n\r\n                <div class=\"pw-code-header\">\r\n\r\n                    <div class=\"pw-window-dots\">\r\n                        <span class=\"pw-window-dot\"><\/span>\r\n                        <span class=\"pw-window-dot\"><\/span>\r\n                        <span class=\"pw-window-dot\"><\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-code-file\">\r\n                        Playwright Automation\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-code-tabs\">\r\n\r\n                    <div class=\"pw-code-tab active\">\r\n                        registration.spec.ts\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-code-tab\">\r\n                        registration.page.ts\r\n                    <\/div>\r\n\r\n                <\/div>\r\n```\r\n\r\n<div class=\"pw-code\"><span class=\"keyword\">import<\/span> { test, expect } <span class=\"keyword\">from<\/span> <span class=\"string\">'@playwright\/test'<\/span>;\r\n\r\ntest.<span class=\"method\">describe<\/span>(<span class=\"string\">'Registration'<\/span>, () => {\r\n\r\ntest(<span class=\"string\">'user can create account'<\/span>, <span class=\"keyword\">async<\/span> ({ page }) => {\r\n\r\n```\r\n  <span class=\"comment\">\/\/ Open registration page<\/span>\r\n\r\n  <span class=\"keyword\">await<\/span> page.<span class=\"method\">goto<\/span>(\r\n    <span class=\"string\">'\/action\/register'<\/span>\r\n  );\r\n\r\n  <span class=\"comment\">\/\/ Fill user data<\/span>\r\n\r\n  <span class=\"keyword\">await<\/span> page\r\n    .<span class=\"method\">locator<\/span>(<span class=\"string\">'#email'<\/span>)\r\n    .<span class=\"method\">fill<\/span>(<span class=\"string\">'qa@test.com'<\/span>);\r\n\r\n  <span class=\"keyword\">await<\/span> page\r\n    .<span class=\"method\">locator<\/span>(<span class=\"string\">'#first_name'<\/span>)\r\n    .<span class=\"method\">fill<\/span>(<span class=\"string\">'Alex'<\/span>);\r\n\r\n  <span class=\"comment\">\/\/ Submit registration<\/span>\r\n\r\n  <span class=\"keyword\">await<\/span> page\r\n    .<span class=\"method\">getByRole<\/span>(<span class=\"string\">'button'<\/span>, {\r\n      name: <span class=\"string\">'Continue'<\/span>\r\n    })\r\n    .<span class=\"method\">click<\/span>();\r\n\r\n  <span class=\"comment\">\/\/ Verify result<\/span>\r\n\r\n  <span class=\"keyword\">await<\/span> expect(\r\n    page.<span class=\"method\">locator<\/span>(<span class=\"string\">'.uk-alert-success'<\/span>)\r\n  ).<span class=\"method\">toBeVisible<\/span>();\r\n```\r\n\r\n});\r\n\r\n});<\/div>\r\n\r\n```\r\n                <div class=\"pw-code-footer\">\r\n\r\n                    <div class=\"pw-code-status\">\r\n                        \u0422\u0435\u0441\u0442\u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043e\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-code-stack\">\r\n                        TypeScript \u2022 Playwright\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-result-row\">\r\n\r\n                <div class=\"pw-result\">\r\n                    <strong>UI<\/strong>\r\n                    <span>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044f UI<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"pw-result\">\r\n                    <strong>API<\/strong>\r\n                    <span>API Testing<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"pw-result\">\r\n                    <strong>CI\/CD<\/strong>\r\n                    <span>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0456 \u0437\u0430\u043f\u0443\u0441\u043a\u0438<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/section>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-11d7217 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"11d7217\" data-element_type=\"section\" id=\"program\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d0574fd\" data-id=\"d0574fd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-83ace53 elementor-widget elementor-widget-html\" data-id=\"83ace53\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* ==========================================================\r\n   PLAYWRIGHT + TYPESCRIPT \u2014 8 \u0422\u0418\u0416\u041d\u0406\u0412\r\n   UKRAINIAN VERSION\r\n   Elementor Safe \/ Mobile Safe\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua {\r\n    position: relative !important;\r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    overflow: hidden !important;\r\n\r\n    padding: 110px 20px !important;\r\n\r\n    font-family: inherit !important;\r\n    color: #f8faf9 !important;\r\n\r\n    background:\r\n        radial-gradient(circle at 15% 20%, rgba(34,197,94,.14), transparent 26%),\r\n        radial-gradient(circle at 85% 75%, rgba(16,185,129,.08), transparent 28%),\r\n        linear-gradient(180deg,#06110b 0%,#08140d 55%,#06110b 100%) !important;\r\n}\r\n\r\n.pw-roadmap-ua,\r\n.pw-roadmap-ua *,\r\n.pw-roadmap-ua *::before,\r\n.pw-roadmap-ua *::after {\r\n    box-sizing: border-box !important;\r\n}\r\n\r\n.pw-roadmap-ua * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-roadmap-ua::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(rgba(74,222,128,.035) 1px, transparent 1px),\r\n        linear-gradient(90deg,rgba(74,222,128,.035) 1px,transparent 1px);\r\n\r\n    background-size: 72px 72px;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-roadmap-ua-container {\r\n    position: relative !important;\r\n    z-index: 2 !important;\r\n\r\n    width: 100% !important;\r\n    max-width: 1180px !important;\r\n\r\n    margin: 0 auto !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   HEADER\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-head {\r\n    width: 100% !important;\r\n    max-width: 900px !important;\r\n\r\n    margin: 0 auto 65px !important;\r\n\r\n    text-align: center !important;\r\n}\r\n\r\n.pw-roadmap-ua-badge {\r\n    display: inline-flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n\r\n    gap: 8px !important;\r\n\r\n    margin: 0 0 18px !important;\r\n    padding: 8px 15px !important;\r\n\r\n    border: 1px solid rgba(74,222,128,.22) !important;\r\n    border-radius: 100px !important;\r\n\r\n    background: rgba(34,197,94,.07) !important;\r\n\r\n    color: #4ade80 !important;\r\n\r\n    font-size: 11px !important;\r\n    font-weight: 800 !important;\r\n\r\n    letter-spacing: .7px !important;\r\n    text-transform: uppercase !important;\r\n}\r\n\r\n.pw-roadmap-ua-badge::before {\r\n    content: \"\";\r\n\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #4ade80;\r\n\r\n    box-shadow: 0 0 10px rgba(74,222,128,.7);\r\n}\r\n\r\n.pw-roadmap-ua h2 {\r\n    margin: 0 0 22px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-family: inherit !important;\r\n\r\n    font-size: clamp(38px,5vw,58px) !important;\r\n    line-height: 1.08 !important;\r\n\r\n    font-weight: 850 !important;\r\n    letter-spacing: -1.7px !important;\r\n\r\n    text-align: center !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-roadmap-ua h2 span {\r\n    display: block !important;\r\n\r\n    color: #4ade80 !important;\r\n}\r\n\r\n.pw-roadmap-ua-subtitle {\r\n    width: 100% !important;\r\n    max-width: 820px !important;\r\n\r\n    margin: 0 auto !important;\r\n    padding: 0 !important;\r\n\r\n    color: #a7b5ab !important;\r\n\r\n    font-size: 18px !important;\r\n    line-height: 1.75 !important;\r\n\r\n    text-align: center !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-roadmap-ua-subtitle strong {\r\n    color: #ffffff !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   ROADMAP LIST\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-list {\r\n    position: relative !important;\r\n\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n\r\n    gap: 18px !important;\r\n\r\n    width: 100% !important;\r\n}\r\n\r\n.pw-roadmap-ua-list::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 38px;\r\n    top: 25px;\r\n    bottom: 25px;\r\n\r\n    width: 1px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            to bottom,\r\n            rgba(74,222,128,.08),\r\n            rgba(74,222,128,.65),\r\n            rgba(74,222,128,.08)\r\n        );\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   WEEK\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-week {\r\n    position: relative !important;\r\n\r\n    display: grid !important;\r\n\r\n    grid-template-columns: 78px minmax(0,1fr) !important;\r\n\r\n    gap: 22px !important;\r\n\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n}\r\n\r\n.pw-roadmap-ua-number-wrap {\r\n    position: relative !important;\r\n    z-index: 3 !important;\r\n\r\n    display: flex !important;\r\n\r\n    align-items: flex-start !important;\r\n    justify-content: center !important;\r\n}\r\n\r\n.pw-roadmap-ua-number {\r\n    display: flex !important;\r\n\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n\r\n    width: 56px !important;\r\n    height: 56px !important;\r\n\r\n    margin-top: 16px !important;\r\n\r\n    border: 1px solid rgba(74,222,128,.24) !important;\r\n    border-radius: 16px !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(34,197,94,.17),\r\n            rgba(34,197,94,.05)\r\n        ) !important;\r\n\r\n    color: #4ade80 !important;\r\n\r\n    font-size: 15px !important;\r\n    font-weight: 800 !important;\r\n\r\n    box-shadow: 0 0 30px rgba(34,197,94,.07) !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   CARD\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-card {\r\n    position: relative !important;\r\n\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n\r\n    padding: 30px !important;\r\n\r\n    overflow: hidden !important;\r\n\r\n    border: 1px solid rgba(255,255,255,.075) !important;\r\n    border-radius: 20px !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.05),\r\n            rgba(255,255,255,.018)\r\n        ) !important;\r\n\r\n    box-shadow: none !important;\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        border-color .25s ease !important;\r\n}\r\n\r\n.pw-roadmap-ua-card::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    top: 0;\r\n\r\n    width: 3px;\r\n    height: 100%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            to bottom,\r\n            #22c55e,\r\n            rgba(74,222,128,.25),\r\n            transparent\r\n        );\r\n}\r\n\r\n.pw-roadmap-ua-card:hover {\r\n    transform: translateY(-3px);\r\n\r\n    border-color: rgba(74,222,128,.22) !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   CARD HEADER\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-top {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex !important;\r\n\r\n    align-items: flex-start !important;\r\n    justify-content: space-between !important;\r\n\r\n    gap: 20px !important;\r\n\r\n    margin-bottom: 14px !important;\r\n}\r\n\r\n.pw-roadmap-ua-label {\r\n    margin: 0 0 7px !important;\r\n\r\n    color: #4ade80 !important;\r\n\r\n    font-size: 11px !important;\r\n    font-weight: 800 !important;\r\n\r\n    letter-spacing: .8px !important;\r\n    text-transform: uppercase !important;\r\n}\r\n\r\n.pw-roadmap-ua-card h3 {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-family: inherit !important;\r\n\r\n    font-size: 23px !important;\r\n    line-height: 1.3 !important;\r\n\r\n    font-weight: 800 !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-roadmap-ua-tag {\r\n    flex: 0 0 auto !important;\r\n\r\n    padding: 7px 10px !important;\r\n\r\n    border: 1px solid rgba(74,222,128,.15) !important;\r\n    border-radius: 9px !important;\r\n\r\n    background: rgba(34,197,94,.06) !important;\r\n\r\n    color: #8ce9aa !important;\r\n\r\n    font-size: 10px !important;\r\n    font-weight: 700 !important;\r\n\r\n    white-space: nowrap !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   DESCRIPTION\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-description {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    color: #aab7ad !important;\r\n\r\n    font-size: 15px !important;\r\n    line-height: 1.7 !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   DETAILS\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-details {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    width: 100% !important;\r\n\r\n    margin: 20px 0 0 !important;\r\n    padding: 20px !important;\r\n\r\n    border: 1px solid rgba(255,255,255,.065) !important;\r\n    border-radius: 14px !important;\r\n\r\n    background: rgba(0,0,0,.16) !important;\r\n}\r\n\r\n.pw-roadmap-ua-details > strong {\r\n    display: block !important;\r\n\r\n    margin: 0 0 13px !important;\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-size: 13px !important;\r\n    font-weight: 800 !important;\r\n}\r\n\r\n.pw-roadmap-ua-details ul {\r\n    display: grid !important;\r\n\r\n    grid-template-columns: repeat(2,minmax(0,1fr)) !important;\r\n\r\n    gap: 8px 22px !important;\r\n\r\n    width: 100% !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    list-style: none !important;\r\n}\r\n\r\n.pw-roadmap-ua-details li {\r\n    position: relative !important;\r\n\r\n    min-width: 0 !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 0 0 19px !important;\r\n\r\n    list-style: none !important;\r\n\r\n    color: #aebbb2 !important;\r\n\r\n    font-size: 13px !important;\r\n    line-height: 1.55 !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-roadmap-ua-details li::before {\r\n    content: \"\u2713\" !important;\r\n\r\n    position: absolute !important;\r\n\r\n    left: 0 !important;\r\n    top: 0 !important;\r\n\r\n    color: #4ade80 !important;\r\n\r\n    font-weight: 900 !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   PRACTICE\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-practice {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    width: 100% !important;\r\n\r\n    margin: 14px 0 0 !important;\r\n    padding: 15px 17px !important;\r\n\r\n    border: 0 !important;\r\n    border-left: 2px solid #22c55e !important;\r\n    border-radius: 0 11px 11px 0 !important;\r\n\r\n    background: rgba(34,197,94,.06) !important;\r\n\r\n    color: #aebbb2 !important;\r\n\r\n    font-size: 13px !important;\r\n    line-height: 1.65 !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-roadmap-ua-practice strong {\r\n    color: #4ade80 !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   FINAL\r\n========================================================== *\/\r\n\r\n.pw-roadmap-ua-final {\r\n    position: relative !important;\r\n\r\n    width: 100% !important;\r\n\r\n    margin: 30px 0 0 !important;\r\n    padding: 38px 32px !important;\r\n\r\n    overflow: hidden !important;\r\n\r\n    border: 1px solid rgba(74,222,128,.22) !important;\r\n    border-radius: 22px !important;\r\n\r\n    background:\r\n        radial-gradient(circle at 90% 30%,rgba(34,197,94,.12),transparent 30%),\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(34,197,94,.08),\r\n            rgba(255,255,255,.025)\r\n        ) !important;\r\n\r\n    text-align: center !important;\r\n}\r\n\r\n.pw-roadmap-ua-final::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: 20%;\r\n\r\n    width: 60%;\r\n    height: 1px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            #4ade80,\r\n            transparent\r\n        );\r\n}\r\n\r\n.pw-roadmap-ua-final-label {\r\n    margin: 0 0 9px !important;\r\n\r\n    color: #4ade80 !important;\r\n\r\n    font-size: 11px !important;\r\n    font-weight: 800 !important;\r\n\r\n    letter-spacing: 1px !important;\r\n    text-transform: uppercase !important;\r\n}\r\n\r\n.pw-roadmap-ua-final h3 {\r\n    margin: 0 0 12px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-size: 28px !important;\r\n    line-height: 1.3 !important;\r\n\r\n    font-weight: 800 !important;\r\n}\r\n\r\n.pw-roadmap-ua-final p {\r\n    width: 100% !important;\r\n    max-width: 840px !important;\r\n\r\n    margin: 0 auto !important;\r\n    padding: 0 !important;\r\n\r\n    color: #aab7ad !important;\r\n\r\n    font-size: 15px !important;\r\n    line-height: 1.75 !important;\r\n}\r\n\r\n.pw-roadmap-ua-final strong {\r\n    color: #ffffff !important;\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   TABLET\r\n========================================================== *\/\r\n\r\n@media (max-width: 800px) {\r\n\r\n    .pw-roadmap-ua {\r\n        padding: 75px 16px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-head {\r\n        margin-bottom: 45px !important;\r\n\r\n        text-align: left !important;\r\n    }\r\n\r\n    .pw-roadmap-ua h2 {\r\n        font-size: clamp(31px,8vw,40px) !important;\r\n\r\n        line-height: 1.08 !important;\r\n\r\n        letter-spacing: -1px !important;\r\n\r\n        text-align: left !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-subtitle {\r\n        font-size: 16px !important;\r\n        line-height: 1.65 !important;\r\n\r\n        text-align: left !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-list {\r\n        gap: 14px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-list::before {\r\n        left: 19px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-week {\r\n        grid-template-columns: 40px minmax(0,1fr) !important;\r\n\r\n        gap: 11px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-number {\r\n        width: 38px !important;\r\n        height: 38px !important;\r\n\r\n        margin-top: 15px !important;\r\n\r\n        border-radius: 11px !important;\r\n\r\n        font-size: 11px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-card {\r\n        padding: 22px 18px !important;\r\n\r\n        border-radius: 16px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-top {\r\n        display: block !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-tag {\r\n        display: inline-block !important;\r\n\r\n        margin-top: 10px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-card h3 {\r\n        font-size: 19px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-description {\r\n        font-size: 14px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-details {\r\n        padding: 16px 15px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-details ul {\r\n        grid-template-columns: 1fr !important;\r\n\r\n        gap: 7px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-details li {\r\n        font-size: 12.5px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-practice {\r\n        font-size: 12.5px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-final {\r\n        padding: 27px 19px !important;\r\n\r\n        border-radius: 17px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-final h3 {\r\n        font-size: 22px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-final p {\r\n        font-size: 14px !important;\r\n    }\r\n}\r\n\r\n\r\n\/* ==========================================================\r\n   SMALL MOBILE\r\n========================================================== *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .pw-roadmap-ua {\r\n        padding: 62px 11px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua h2 {\r\n        font-size: 30px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-subtitle {\r\n        font-size: 15px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-list::before {\r\n        left: 16px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-week {\r\n        grid-template-columns: 34px minmax(0,1fr) !important;\r\n\r\n        gap: 8px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-number {\r\n        width: 32px !important;\r\n        height: 32px !important;\r\n\r\n        border-radius: 9px !important;\r\n\r\n        font-size: 10px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-card {\r\n        padding: 18px 14px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-card h3 {\r\n        font-size: 18px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-description {\r\n        font-size: 13px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-details {\r\n        padding: 14px 12px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-details li {\r\n        font-size: 12px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-practice {\r\n        padding: 13px 12px !important;\r\n\r\n        font-size: 12px !important;\r\n    }\r\n\r\n    .pw-roadmap-ua-final {\r\n        padding: 23px 14px !important;\r\n    }\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<section class=\"pw-roadmap-ua\">\r\n\r\n<div class=\"pw-roadmap-ua-container\">\r\n\r\n\r\n    <!-- HEADER -->\r\n\r\n    <div class=\"pw-roadmap-ua-head\">\r\n\r\n        <div class=\"pw-roadmap-ua-badge\">\r\n            \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u0430 \u043a\u0443\u0440\u0441\u0443\r\n        <\/div>\r\n\r\n        <h2>\r\n            Playwright + TypeScript\r\n            <span>\u0437\u0430 8 \u0442\u0438\u0436\u043d\u0456\u0432<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"pw-roadmap-ua-subtitle\">\r\n            \u0412\u0456\u0434 \u043e\u0441\u043d\u043e\u0432 TypeScript \u0456 \u043f\u0435\u0440\u0448\u043e\u0433\u043e Playwright-\u0442\u0435\u0441\u0442\u0443\r\n            \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f <strong>\u043f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u043e\u0433\u043e Automation Framework<\/strong>,\r\n            API Automation, Allure, CI\/CD \u0442\u0430 \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u043c \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u043e\u043c.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"pw-roadmap-ua-list\">\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 01\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    01\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 01\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            TypeScript \u0434\u043b\u044f QA Automation\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        START\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u0412\u0438\u0432\u0447\u0430\u0454\u043c\u043e TypeScript \u0441\u0430\u043c\u0435 \u0432 \u0442\u043e\u043c\u0443 \u043e\u0431\u0441\u044f\u0437\u0456,\r\n                    \u044f\u043a\u0438\u0439 \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d Automation QA Engineer \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f,\r\n                    \u0447\u0438\u0442\u0430\u043d\u043d\u044f, \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0443 \u0442\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>let, const \u0442\u0430 \u0437\u043c\u0456\u043d\u043d\u0456<\/li>\r\n                        <li>\u043e\u0441\u043d\u043e\u0432\u043d\u0456 \u0442\u0438\u043f\u0438 \u0434\u0430\u043d\u0438\u0445<\/li>\r\n                        <li>functions<\/li>\r\n                        <li>arrow functions<\/li>\r\n                        <li>arrays \u0442\u0430 \u043c\u0435\u0442\u043e\u0434\u0438 \u043c\u0430\u0441\u0438\u0432\u0456\u0432<\/li>\r\n                        <li>objects<\/li>\r\n                        <li>interfaces<\/li>\r\n                        <li>classes<\/li>\r\n                        <li>constructors<\/li>\r\n                        <li>methods<\/li>\r\n                        <li>async \/ await<\/li>\r\n                        <li>Promise<\/li>\r\n                        <li>imports \/ exports<\/li>\r\n                        <li>\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 TypeScript-\u043f\u0440\u043e\u0454\u043a\u0442\u0443<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430:<\/strong>\r\n                    \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u0457, \u043a\u043b\u0430\u0441\u0438 \u0442\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u0456 \u0434\u0430\u043d\u0456,\r\n                    \u044f\u043a\u0456 \u043d\u0430\u0434\u0430\u043b\u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\u043c\u0435\u043c\u043e\r\n                    \u0443 Playwright Automation \u043f\u0440\u043e\u0454\u043a\u0442\u0456.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 02\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    02\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 02\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            \u041e\u0441\u043d\u043e\u0432\u0438 Playwright \u0442\u0430 \u043f\u0435\u0440\u0448\u0456 UI-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        PLAYWRIGHT\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u0412\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0454\u043c\u043e Playwright, \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443\r\n                    \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0454\u043a\u0442\u0443, Test Runner, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0438\r\n                    \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u043f\u0435\u0440\u0448\u0456 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u0456 UI-\u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>\u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f Playwright<\/li>\r\n                        <li>Node.js \u0442\u0430 npm<\/li>\r\n                        <li>Playwright Test Runner<\/li>\r\n                        <li>\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0454\u043a\u0442\u0443<\/li>\r\n                        <li>test()<\/li>\r\n                        <li>test.describe()<\/li>\r\n                        <li>expect()<\/li>\r\n                        <li>Browser<\/li>\r\n                        <li>BrowserContext<\/li>\r\n                        <li>Page<\/li>\r\n                        <li>page.goto()<\/li>\r\n                        <li>Playwright Configuration<\/li>\r\n                        <li>headless \/ headed mode<\/li>\r\n                        <li>Chromium<\/li>\r\n                        <li>Firefox<\/li>\r\n                        <li>WebKit<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430:<\/strong>\r\n                    \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u043f\u0435\u0440\u0448\u0456 Playwright-\u0442\u0435\u0441\u0442\u0438\r\n                    \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u0443:\r\n                    \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0454\u043c\u043e URL, Title, \u0432\u0438\u0434\u0438\u043c\u0456\u0441\u0442\u044c \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432,\r\n                    \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0442\u0430 \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u044e.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 03\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    03\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 03\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            Locators, Assertions \u0442\u0430 UI Automation\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        UI TESTING\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u0412\u0447\u0438\u043c\u043e\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0437\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438,\r\n                    \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f\u0442\u0438 \u0437 \u0432\u0435\u0431\u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438\r\n                    \u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0456 UI-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u0431\u0435\u0437 \u0437\u0430\u0439\u0432\u0438\u0445 sleep \u0456 timeout.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>getByRole()<\/li>\r\n                        <li>getByText()<\/li>\r\n                        <li>getByLabel()<\/li>\r\n                        <li>getByPlaceholder()<\/li>\r\n                        <li>getByTestId()<\/li>\r\n                        <li>CSS locators<\/li>\r\n                        <li>first()<\/li>\r\n                        <li>last()<\/li>\r\n                        <li>nth()<\/li>\r\n                        <li>filter()<\/li>\r\n                        <li>hasText<\/li>\r\n                        <li>fill()<\/li>\r\n                        <li>click()<\/li>\r\n                        <li>check()<\/li>\r\n                        <li>selectOption()<\/li>\r\n                        <li>Auto-waiting<\/li>\r\n                        <li>toBeVisible()<\/li>\r\n                        <li>toHaveText()<\/li>\r\n                        <li>toHaveValue()<\/li>\r\n                        <li>toHaveURL()<\/li>\r\n                        <li>toHaveTitle()<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430:<\/strong>\r\n                    \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0454\u043c\u043e \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u044e, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0456\u044e,\r\n                    \u0444\u043e\u0440\u043c\u0438, \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u044e, \u043f\u043e\u0448\u0443\u043a\r\n                    \u0442\u0430 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0438 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u0443.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 04\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    04\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 04\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            Page Object Model \u0442\u0430 \u0430\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        ARCHITECTURE\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0456\u0434 \u043e\u043a\u0440\u0435\u043c\u0438\u0445 \u0442\u0435\u0441\u0442\u0456\u0432 \u0434\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0432\u0430\u043d\u043e\u0433\u043e\r\n                    Automation Framework, \u044f\u043a\u0438\u0439 \u0437\u0440\u0443\u0447\u043d\u043e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438,\r\n                    \u0440\u043e\u0437\u0448\u0438\u0440\u044e\u0432\u0430\u0442\u0438 \u0442\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0456\u0439 \u0440\u043e\u0431\u043e\u0442\u0456.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>Page Object Model<\/li>\r\n                        <li>Page Classes<\/li>\r\n                        <li>Locator \u0443 Page Object<\/li>\r\n                        <li>Page methods<\/li>\r\n                        <li>constructor(page)<\/li>\r\n                        <li>readonly Locator<\/li>\r\n                        <li>BasePage<\/li>\r\n                        <li>reusable methods<\/li>\r\n                        <li>DRY \u043f\u0456\u0434\u0445\u0456\u0434<\/li>\r\n                        <li>\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 tests \/ pages<\/li>\r\n                        <li>test data<\/li>\r\n                        <li>\u0440\u043e\u0437\u0434\u0456\u043b\u0435\u043d\u043d\u044f test \u0442\u0430 page logic<\/li>\r\n                        <li>\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0442\u0435\u0441\u0442\u0456\u0432<\/li>\r\n                        <li>\u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 framework<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430:<\/strong>\r\n                    \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c\u043e \u0456\u0441\u043d\u0443\u044e\u0447\u0456 UI-\u0442\u0435\u0441\u0442\u0438\r\n                    \u0443 Page Object Model \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e\r\n                    BasePage, RegistrationPage,\r\n                    AuthenticationPage \u0442\u0430 \u0456\u043d\u0448\u0456 Page Objects.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 05\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    05\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 05\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            Fixtures, Hooks, Test Data \u0442\u0430 Faker\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        FRAMEWORK\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u041e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0443\u0454\u043c\u043e \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0442\u0435\u0441\u0442\u0456\u0432,\r\n                    \u0440\u043e\u0431\u043e\u0442\u0443 \u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438 \u0442\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\r\n                    \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0457 \u043b\u043e\u0433\u0456\u043a\u0438 \u0432 Automation Framework.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>beforeEach()<\/li>\r\n                        <li>afterEach()<\/li>\r\n                        <li>beforeAll()<\/li>\r\n                        <li>afterAll()<\/li>\r\n                        <li>Playwright Fixtures<\/li>\r\n                        <li>custom fixtures<\/li>\r\n                        <li>test.extend()<\/li>\r\n                        <li>Page Objects \u0447\u0435\u0440\u0435\u0437 fixtures<\/li>\r\n                        <li>test data<\/li>\r\n                        <li>Faker<\/li>\r\n                        <li>random email<\/li>\r\n                        <li>random name<\/li>\r\n                        <li>password generation<\/li>\r\n                        <li>environment variables<\/li>\r\n                        <li>.env<\/li>\r\n                        <li>test environments<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430:<\/strong>\r\n                    \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e reusable fixtures,\r\n                    \u0433\u0435\u043d\u0435\u0440\u0443\u0454\u043c\u043e \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0456\u0432 \u0447\u0435\u0440\u0435\u0437 Faker\r\n                    \u0442\u0430 \u0433\u043e\u0442\u0443\u0454\u043c\u043e \u043e\u043a\u0440\u0435\u043c\u0456 \u0442\u0435\u0441\u0442\u043e\u0432\u0456 \u0434\u0430\u043d\u0456\r\n                    \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u0438\u0445 \u0456 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457\u0432.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 06\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    06\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 06\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            API Testing \u0443 Playwright\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        API\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u0414\u043e\u0434\u0430\u0454\u043c\u043e API Automation \u0434\u043e Playwright-\u043f\u0440\u043e\u0454\u043a\u0442\u0443,\r\n                    \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e CRUD API-\u0442\u0435\u0441\u0442\u0438 \u0442\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u043c\u043e API\r\n                    \u0434\u043b\u044f \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0434\u0430\u043d\u0438\u0445 \u0434\u043b\u044f UI-\u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457\u0432.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>APIRequestContext<\/li>\r\n                        <li>request fixture<\/li>\r\n                        <li>GET requests<\/li>\r\n                        <li>POST requests<\/li>\r\n                        <li>PUT requests<\/li>\r\n                        <li>PATCH requests<\/li>\r\n                        <li>DELETE requests<\/li>\r\n                        <li>status code<\/li>\r\n                        <li>response body<\/li>\r\n                        <li>headers<\/li>\r\n                        <li>JSON response<\/li>\r\n                        <li>API assertions<\/li>\r\n                        <li>\u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445 \u0447\u0435\u0440\u0435\u0437 API<\/li>\r\n                        <li>UI + API scenarios<\/li>\r\n                        <li>cleanup \u043f\u0456\u0441\u043b\u044f \u0442\u0435\u0441\u0442\u0443<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430:<\/strong>\r\n                    \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e CRUD API-\u0442\u0435\u0441\u0442\u0438,\r\n                    \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0454\u043c\u043e status code \u0442\u0430 response body,\r\n                    \u0430 \u0442\u0430\u043a\u043e\u0436 \u0433\u043e\u0442\u0443\u0454\u043c\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u0456 \u0434\u0430\u043d\u0456 \u0447\u0435\u0440\u0435\u0437 API\r\n                    \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c UI-\u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 07\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    07\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 07\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            Git, GitHub, Allure \u0442\u0430 CI\/CD\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        DEVOPS\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u041f\u0456\u0434\u043a\u043b\u044e\u0447\u0430\u0454\u043c\u043e \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0438, \u044f\u043a\u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0442\u044c\u0441\u044f\r\n                    \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0456 QA Automation:\r\n                    \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0432\u0435\u0440\u0441\u0456\u0439, \u0437\u0432\u0456\u0442\u043d\u0456\u0441\u0442\u044c \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u0456\u0432.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0432\u0438\u0432\u0447\u0430\u0454\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>Git init<\/li>\r\n                        <li>Git status<\/li>\r\n                        <li>Git add<\/li>\r\n                        <li>Git commit<\/li>\r\n                        <li>Git branches<\/li>\r\n                        <li>push \/ pull<\/li>\r\n                        <li>GitHub Repository<\/li>\r\n                        <li>.gitignore<\/li>\r\n                        <li>Allure Reporter<\/li>\r\n                        <li>Allure Results<\/li>\r\n                        <li>Allure Report<\/li>\r\n                        <li>screenshots<\/li>\r\n                        <li>trace<\/li>\r\n                        <li>video<\/li>\r\n                        <li>GitHub Actions<\/li>\r\n                        <li>CI workflow<\/li>\r\n                        <li>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u0456\u0432<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430:<\/strong>\r\n                    \u043f\u0443\u0431\u043b\u0456\u043a\u0443\u0454\u043c\u043e Playwright-\u043f\u0440\u043e\u0454\u043a\u0442 \u043d\u0430 GitHub,\r\n                    \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0430\u0454\u043c\u043e Allure \u0442\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e CI workflow,\r\n                    \u044f\u043a\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ==================================================\r\n             WEEK 08\r\n        ================================================== -->\r\n\r\n        <div class=\"pw-roadmap-ua-week\">\r\n\r\n            <div class=\"pw-roadmap-ua-number-wrap\">\r\n                <div class=\"pw-roadmap-ua-number\">\r\n                    08\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pw-roadmap-ua-card\">\r\n\r\n                <div class=\"pw-roadmap-ua-top\">\r\n\r\n                    <div>\r\n\r\n                        <div class=\"pw-roadmap-ua-label\">\r\n                            \u0422\u0438\u0436\u0434\u0435\u043d\u044c 08\r\n                        <\/div>\r\n\r\n                        <h3>\r\n                            Automation Framework \u0442\u0430 \u0444\u0456\u043d\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442\r\n                        <\/h3>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-roadmap-ua-tag\">\r\n                        FINAL\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"pw-roadmap-ua-description\">\r\n                    \u041e\u0431'\u0454\u0434\u043d\u0443\u0454\u043c\u043e \u0432\u0441\u0456 \u043e\u0442\u0440\u0438\u043c\u0430\u043d\u0456 \u0437\u043d\u0430\u043d\u043d\u044f\r\n                    \u0432 \u043f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f\r\n                    \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u0443.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-details\">\r\n\r\n                    <strong>\r\n                        \u0429\u043e \u0440\u043e\u0431\u0438\u043c\u043e:\r\n                    <\/strong>\r\n\r\n                    <ul>\r\n                        <li>\u0444\u043e\u0440\u043c\u0443\u0454\u043c\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 framework<\/li>\r\n                        <li>\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043c\u043e Page Objects<\/li>\r\n                        <li>\u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e reusable fixtures<\/li>\r\n                        <li>\u043e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0443\u0454\u043c\u043e test data<\/li>\r\n                        <li>\u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u0456 UI-\u0442\u0435\u0441\u0442\u0438<\/li>\r\n                        <li>\u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u0456 UI-\u0442\u0435\u0441\u0442\u0438<\/li>\r\n                        <li>API-\u0442\u0435\u0441\u0442\u0438<\/li>\r\n                        <li>UI + API scenarios<\/li>\r\n                        <li>Playwright configuration<\/li>\r\n                        <li>Allure reporting<\/li>\r\n                        <li>CI\/CD<\/li>\r\n                        <li>\u0430\u043d\u0430\u043b\u0456\u0437 failed tests<\/li>\r\n                        <li>code review<\/li>\r\n                        <li>\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433<\/li>\r\n                        <li>GitHub repository<\/li>\r\n                        <li>\u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0434\u043e \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0438<\/li>\r\n                    <\/ul>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-roadmap-ua-practice\">\r\n                    <strong>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/strong>\r\n                    \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0432\u0430\u043d\u0438\u0439 Playwright Automation Project,\r\n                    \u0443 \u044f\u043a\u043e\u043c\u0443 \u043f\u043e\u0454\u0434\u043d\u0430\u043d\u0456 TypeScript, UI Automation,\r\n                    API Testing, Page Object Model, Fixtures,\r\n                    Git, Allure \u0442\u0430 CI\/CD.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ==================================================\r\n         FINAL RESULT\r\n    ================================================== -->\r\n\r\n    <div class=\"pw-roadmap-ua-final\">\r\n\r\n        <div class=\"pw-roadmap-ua-final-label\">\r\n            \u041f\u0456\u0441\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044f \u043a\u0443\u0440\u0441\u0443\r\n        <\/div>\r\n\r\n        <h3>\r\n            \u0412\u0430\u0448 Playwright Automation Project\r\n        <\/h3>\r\n\r\n        <p>\r\n            \u0423 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0456 \u0432\u0438 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0435\r\n            <strong>\r\n                \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f\r\n                \u043d\u0430 TypeScript + Playwright\r\n            <\/strong>\r\n            \u0437 UI- \u0442\u0430 API-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0430\u043c\u0438, Page Object Model,\r\n            Fixtures, \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438, Allure Report,\r\n            GitHub \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0442\u0435\u0441\u0442\u0456\u0432 \u0443 CI\/CD.\r\n            \u041f\u0440\u043e\u0454\u043a\u0442 \u043c\u043e\u0436\u043d\u0430 \u0431\u0443\u0434\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u044f\u043a \u043f\u0440\u0438\u043a\u043b\u0430\u0434\r\n            \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u0457 \u0440\u043e\u0431\u043e\u0442\u0438 \u043f\u0456\u0434 \u0447\u0430\u0441 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0438\r\n            Automation QA Engineer.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e79c66d elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"e79c66d\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2eddb88\" data-id=\"2eddb88\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b3ec6ee elementor-widget elementor-widget-html\" data-id=\"b3ec6ee\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* =========================================================\r\n   PLAYWRIGHT TECHNOLOGY STACK\r\n   Elementor-safe \/ Mobile-safe\r\n========================================================= *\/\r\n\r\n.pw-tech {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    padding: 110px 20px;\r\n    font-family: inherit;\r\n    color: #102117;\r\n\r\n    background:\r\n        radial-gradient(circle at 15% 15%, rgba(34,197,94,.08), transparent 25%),\r\n        radial-gradient(circle at 85% 85%, rgba(74,222,128,.05), transparent 25%),\r\n        linear-gradient(180deg,#ffffff 0%,#f6fbf7 100%);\r\n}\r\n\r\n.pw-tech,\r\n.pw-tech *,\r\n.pw-tech *::before,\r\n.pw-tech *::after {\r\n    box-sizing: border-box !important;\r\n}\r\n\r\n.pw-tech * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-tech-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1140px;\r\n    margin: 0 auto;\r\n    min-width: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.pw-tech-head {\r\n    width: 100%;\r\n    max-width: 850px;\r\n    margin: 0 auto 55px;\r\n    text-align: center;\r\n}\r\n\r\n.pw-tech-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 18px;\r\n    padding: 8px 14px;\r\n    border: 1px solid rgba(22,163,74,.15);\r\n    border-radius: 100px;\r\n    background: rgba(34,197,94,.07);\r\n    color: #15803d;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-tech-badge::before {\r\n    content: \"\";\r\n    flex: 0 0 auto;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #22c55e;\r\n    box-shadow: 0 0 10px rgba(34,197,94,.5);\r\n}\r\n\r\n.pw-tech h2 {\r\n    margin: 0 0 20px !important;\r\n    padding: 0 !important;\r\n    color: #102117 !important;\r\n    font-size: clamp(40px,5vw,60px) !important;\r\n    line-height: 1.06 !important;\r\n    font-weight: 850 !important;\r\n    letter-spacing: -1.7px !important;\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-tech h2 span {\r\n    display: block;\r\n    color: #16a34a !important;\r\n}\r\n\r\n.pw-tech-subtitle {\r\n    width: 100%;\r\n    max-width: 760px;\r\n    margin: 0 auto !important;\r\n    padding: 0 !important;\r\n    color: #617066 !important;\r\n    font-size: 18px !important;\r\n    line-height: 1.75 !important;\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-tech-subtitle strong {\r\n    color: #254d30 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CORE STACK\r\n========================================================= *\/\r\n\r\n.pw-tech-core {\r\n    display: grid;\r\n    grid-template-columns: repeat(3,minmax(0,1fr));\r\n    gap: 16px;\r\n    width: 100%;\r\n    margin-bottom: 26px;\r\n}\r\n\r\n.pw-tech-core-card {\r\n    position: relative;\r\n    width: 100%;\r\n    min-width: 0;\r\n    padding: 30px;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(22,163,74,.11);\r\n    border-radius: 20px;\r\n    background: rgba(255,255,255,.94);\r\n    box-shadow: 0 14px 40px rgba(24,70,39,.05);\r\n}\r\n\r\n.pw-tech-core-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    right: -25px;\r\n    bottom: -35px;\r\n    width: 120px;\r\n    height: 120px;\r\n    border-radius: 50%;\r\n    background: rgba(34,197,94,.045);\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-tech-core-number {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin-bottom: 28px;\r\n    color: #16a34a;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n    letter-spacing: .8px;\r\n}\r\n\r\n.pw-tech-core-card h3 {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0 0 12px !important;\r\n    padding: 0 !important;\r\n    color: #16331e !important;\r\n    font-size: 23px !important;\r\n    line-height: 1.2 !important;\r\n    font-weight: 800 !important;\r\n}\r\n\r\n.pw-tech-core-card p {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    color: #68776d !important;\r\n    font-size: 13px !important;\r\n    line-height: 1.75 !important;\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-tech-tags {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 6px;\r\n    margin-top: 20px;\r\n}\r\n\r\n.pw-tech-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    padding: 6px 9px;\r\n    border-radius: 7px;\r\n    background: #f0f8f2;\r\n    color: #3b5b44;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    line-height: 1.2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROJECT AREA\r\n========================================================= *\/\r\n\r\n.pw-tech-project {\r\n    display: grid;\r\n    grid-template-columns: .9fr 1.1fr;\r\n    gap: 20px;\r\n    align-items: stretch;\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-tech-project-left {\r\n    width: 100%;\r\n    min-width: 0;\r\n    padding: 34px;\r\n    overflow: hidden;\r\n    border-radius: 22px;\r\n\r\n    background:\r\n        radial-gradient(circle at 90% 10%, rgba(74,222,128,.12), transparent 30%),\r\n        #08140d !important;\r\n\r\n    color: #fff;\r\n}\r\n\r\n.pw-tech-project-label {\r\n    margin-bottom: 16px;\r\n    color: #4ade80;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-tech-project-left h3 {\r\n    margin: 0 0 16px !important;\r\n    padding: 0 !important;\r\n    color: #fff !important;\r\n    font-size: 30px !important;\r\n    line-height: 1.15 !important;\r\n    font-weight: 800 !important;\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-tech-project-left > p {\r\n    margin: 0 0 25px !important;\r\n    padding: 0 !important;\r\n    color: #a6b5ab !important;\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CODE\r\n========================================================= *\/\r\n\r\n.pw-tech-code {\r\n    display: block !important;\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n    max-width: 100% !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    overflow: hidden !important;\r\n\r\n    border: 1px solid rgba(255,255,255,.08);\r\n    border-radius: 14px;\r\n\r\n    background: #050b07 !important;\r\n    background-color: #050b07 !important;\r\n\r\n    box-shadow:\r\n        inset 0 1px 0 rgba(255,255,255,.02),\r\n        0 12px 30px rgba(0,0,0,.16);\r\n}\r\n\r\n.pw-tech-code-head {\r\n    display: block !important;\r\n    width: 100% !important;\r\n    margin: 0 !important;\r\n    padding: 11px 14px !important;\r\n\r\n    border: 0 !important;\r\n    border-bottom: 1px solid rgba(255,255,255,.07) !important;\r\n\r\n    background: #08110b !important;\r\n    color: #7d8b82 !important;\r\n\r\n    font-family: Consolas,\"SFMono-Regular\",\"Liberation Mono\",Menlo,monospace !important;\r\n    font-size: 9px !important;\r\n    line-height: 1.4 !important;\r\n}\r\n\r\n.pw-tech .pw-tech-code pre,\r\n.pw-tech-code pre {\r\n    display: block !important;\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n    max-width: 100% !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 20px !important;\r\n\r\n    background: #050b07 !important;\r\n    background-color: #050b07 !important;\r\n    background-image: none !important;\r\n\r\n    color: #d5e2d8 !important;\r\n\r\n    border: 0 !important;\r\n    outline: 0 !important;\r\n    border-radius: 0 !important;\r\n    box-shadow: none !important;\r\n\r\n    font-family: Consolas,\"SFMono-Regular\",\"Liberation Mono\",Menlo,monospace !important;\r\n    font-size: 10.5px !important;\r\n    font-weight: 400 !important;\r\n    line-height: 1.75 !important;\r\n    text-align: left !important;\r\n\r\n    white-space: pre-wrap !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n    word-wrap: break-word !important;\r\n    word-break: normal !important;\r\n\r\n    overflow-x: hidden !important;\r\n    overflow-y: hidden !important;\r\n\r\n    tab-size: 2 !important;\r\n}\r\n\r\n.pw-tech-code .green {\r\n    color: #4ade80 !important;\r\n}\r\n\r\n.pw-tech-code .yellow {\r\n    color: #fde68a !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOOLS\r\n========================================================= *\/\r\n\r\n.pw-tech-tools {\r\n    display: grid;\r\n    grid-template-columns: repeat(2,minmax(0,1fr));\r\n    gap: 10px;\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-tech-tool {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 14px;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    padding: 18px;\r\n\r\n    border: 1px solid rgba(22,163,74,.09);\r\n    border-radius: 14px;\r\n\r\n    background: rgba(255,255,255,.92);\r\n}\r\n\r\n.pw-tech-tool-dot {\r\n    flex: 0 0 9px;\r\n    width: 9px;\r\n    height: 9px;\r\n    margin-top: 5px;\r\n    border-radius: 50%;\r\n    background: #22c55e;\r\n    box-shadow: 0 0 0 5px rgba(34,197,94,.08);\r\n}\r\n\r\n.pw-tech-tool-text {\r\n    flex: 1 1 auto;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-tech-tool strong {\r\n    display: block !important;\r\n    margin: 0 0 4px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #16331e !important;\r\n\r\n    font-size: 13px !important;\r\n    font-weight: 800 !important;\r\n    line-height: 1.35 !important;\r\n\r\n    white-space: normal !important;\r\n    word-break: normal !important;\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n.pw-tech-tool span {\r\n    display: block !important;\r\n\r\n    color: #748178 !important;\r\n\r\n    font-size: 11px !important;\r\n    line-height: 1.55 !important;\r\n\r\n    white-space: normal !important;\r\n    word-break: normal !important;\r\n    overflow-wrap: anywhere !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM \u2014 FIXED\r\n========================================================= *\/\r\n\r\n.pw-tech-bottom {\r\n    display: block !important;\r\n\r\n    width: 100% !important;\r\n    max-width: 100% !important;\r\n    min-width: 0 !important;\r\n\r\n    margin-top: 22px !important;\r\n    padding: 20px 22px !important;\r\n\r\n    border: 1px solid rgba(22,163,74,.11) !important;\r\n    border-radius: 15px !important;\r\n\r\n    background: rgba(34,197,94,.055) !important;\r\n\r\n    color: #416049 !important;\r\n\r\n    font-size: 13px !important;\r\n    line-height: 1.7 !important;\r\n\r\n    text-align: left !important;\r\n\r\n    white-space: normal !important;\r\n    word-break: normal !important;\r\n    overflow-wrap: normal !important;\r\n\r\n    overflow: hidden !important;\r\n}\r\n\r\n.pw-tech-bottom strong {\r\n    display: inline !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    color: #166534 !important;\r\n\r\n    font-size: inherit !important;\r\n    line-height: inherit !important;\r\n\r\n    white-space: normal !important;\r\n    word-break: normal !important;\r\n    overflow-wrap: normal !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .pw-tech {\r\n        padding: 80px 18px !important;\r\n        overflow-x: hidden !important;\r\n    }\r\n\r\n    .pw-tech-core {\r\n        grid-template-columns: 1fr !important;\r\n    }\r\n\r\n    .pw-tech-project {\r\n        grid-template-columns: 1fr !important;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .pw-tech {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n\r\n        padding: 68px 14px !important;\r\n\r\n        overflow-x: hidden !important;\r\n    }\r\n\r\n    .pw-tech-container {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-width: 0 !important;\r\n        overflow: hidden !important;\r\n    }\r\n\r\n\r\n    \/* HEADER *\/\r\n\r\n    .pw-tech-head {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n\r\n        margin: 0 0 34px !important;\r\n\r\n        text-align: left !important;\r\n    }\r\n\r\n    .pw-tech-badge {\r\n        margin-bottom: 16px !important;\r\n        padding: 7px 12px !important;\r\n        font-size: 10px !important;\r\n    }\r\n\r\n    .pw-tech h2 {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n\r\n        margin-bottom: 18px !important;\r\n\r\n        font-size: clamp(30px,8.6vw,39px) !important;\r\n        line-height: 1.08 !important;\r\n        letter-spacing: -1px !important;\r\n\r\n        text-align: left !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: anywhere !important;\r\n    }\r\n\r\n    .pw-tech-subtitle {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n\r\n        margin: 0 !important;\r\n\r\n        font-size: 15px !important;\r\n        line-height: 1.65 !important;\r\n\r\n        text-align: left !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: anywhere !important;\r\n    }\r\n\r\n\r\n    \/* CORE *\/\r\n\r\n    .pw-tech-core {\r\n        display: grid !important;\r\n        grid-template-columns: 1fr !important;\r\n\r\n        gap: 12px !important;\r\n\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n\r\n        margin-bottom: 18px !important;\r\n    }\r\n\r\n    .pw-tech-core-card {\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n\r\n        padding: 22px 18px !important;\r\n\r\n        border-radius: 16px !important;\r\n    }\r\n\r\n    .pw-tech-core-number {\r\n        margin-bottom: 16px !important;\r\n        font-size: 9px !important;\r\n    }\r\n\r\n    .pw-tech-core-card h3 {\r\n        font-size: 20px !important;\r\n    }\r\n\r\n    .pw-tech-core-card p {\r\n        font-size: 12.5px !important;\r\n        line-height: 1.65 !important;\r\n    }\r\n\r\n\r\n    \/* PROJECT *\/\r\n\r\n    .pw-tech-project {\r\n        display: grid !important;\r\n        grid-template-columns: 1fr !important;\r\n\r\n        gap: 14px !important;\r\n\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n    }\r\n\r\n    .pw-tech-project-left {\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n\r\n        padding: 22px 16px !important;\r\n\r\n        border-radius: 17px !important;\r\n\r\n        overflow: hidden !important;\r\n    }\r\n\r\n    .pw-tech-project-left h3 {\r\n        width: 100% !important;\r\n\r\n        margin-bottom: 13px !important;\r\n\r\n        font-size: 22px !important;\r\n        line-height: 1.18 !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: anywhere !important;\r\n    }\r\n\r\n    .pw-tech-project-left > p {\r\n        font-size: 13px !important;\r\n        line-height: 1.65 !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: anywhere !important;\r\n    }\r\n\r\n\r\n    \/* CODE *\/\r\n\r\n    .pw-tech-code {\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n        max-width: 100% !important;\r\n\r\n        overflow: hidden !important;\r\n\r\n        border-radius: 12px !important;\r\n    }\r\n\r\n    .pw-tech-code-head {\r\n        width: 100% !important;\r\n\r\n        padding: 10px 12px !important;\r\n\r\n        font-size: 8.5px !important;\r\n\r\n        overflow: hidden !important;\r\n        white-space: nowrap !important;\r\n        text-overflow: ellipsis !important;\r\n    }\r\n\r\n    .pw-tech .pw-tech-code pre,\r\n    .pw-tech-code pre {\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n        max-width: 100% !important;\r\n\r\n        margin: 0 !important;\r\n        padding: 14px 12px !important;\r\n\r\n        overflow: hidden !important;\r\n\r\n        font-size: 9px !important;\r\n        line-height: 1.65 !important;\r\n\r\n        white-space: pre-wrap !important;\r\n\r\n        overflow-wrap: anywhere !important;\r\n        word-wrap: break-word !important;\r\n        word-break: break-word !important;\r\n    }\r\n\r\n\r\n    \/* TOOLS *\/\r\n\r\n    .pw-tech-tools {\r\n        display: grid !important;\r\n        grid-template-columns: 1fr !important;\r\n\r\n        gap: 9px !important;\r\n\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n    }\r\n\r\n    .pw-tech-tool {\r\n        width: 100% !important;\r\n        min-width: 0 !important;\r\n\r\n        gap: 12px !important;\r\n\r\n        padding: 15px !important;\r\n\r\n        border-radius: 12px !important;\r\n    }\r\n\r\n    .pw-tech-tool-text {\r\n        flex: 1 1 auto !important;\r\n        min-width: 0 !important;\r\n    }\r\n\r\n    .pw-tech-tool strong {\r\n        font-size: 12.5px !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: anywhere !important;\r\n    }\r\n\r\n    .pw-tech-tool span {\r\n        font-size: 10.5px !important;\r\n        line-height: 1.5 !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: anywhere !important;\r\n    }\r\n\r\n\r\n    \/* BOTTOM *\/\r\n\r\n    .pw-tech-bottom {\r\n        display: block !important;\r\n\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-width: 0 !important;\r\n\r\n        margin-top: 16px !important;\r\n\r\n        padding: 18px 16px !important;\r\n\r\n        border-radius: 14px !important;\r\n\r\n        font-size: 13px !important;\r\n        line-height: 1.65 !important;\r\n\r\n        text-align: left !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: normal !important;\r\n    }\r\n\r\n    .pw-tech-bottom strong {\r\n        display: inline !important;\r\n\r\n        white-space: normal !important;\r\n        word-break: normal !important;\r\n        overflow-wrap: normal !important;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .pw-tech {\r\n        padding: 56px 11px !important;\r\n    }\r\n\r\n    .pw-tech h2 {\r\n        font-size: 29px !important;\r\n    }\r\n\r\n    .pw-tech-subtitle {\r\n        font-size: 14.5px !important;\r\n    }\r\n\r\n    .pw-tech-core-card {\r\n        padding: 19px 15px !important;\r\n    }\r\n\r\n    .pw-tech-project-left {\r\n        padding: 19px 13px !important;\r\n    }\r\n\r\n    .pw-tech-project-left h3 {\r\n        font-size: 20px !important;\r\n    }\r\n\r\n    .pw-tech .pw-tech-code pre,\r\n    .pw-tech-code pre {\r\n        padding: 12px 10px !important;\r\n        font-size: 8.4px !important;\r\n    }\r\n\r\n    .pw-tech-tool {\r\n        padding: 14px 12px !important;\r\n    }\r\n\r\n    .pw-tech-bottom {\r\n        padding: 16px 14px !important;\r\n        font-size: 12.5px !important;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"pw-tech\">\r\n\r\n    <div class=\"pw-tech-container\">\r\n\r\n\r\n        <!-- HEADER -->\r\n\r\n        <div class=\"pw-tech-head\">\r\n\r\n            <div class=\"pw-tech-badge\">\r\n                Technology Stack\r\n            <\/div>\r\n\r\n            <h2>\r\n                \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0457 \u0442\u0430 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0438,\r\n                <span>\u0437 \u044f\u043a\u0438\u043c\u0438 \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"pw-tech-subtitle\">\r\n                \u041d\u0430 \u043a\u0443\u0440\u0441\u0456 \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0439 \u0441\u0442\u0435\u043a\r\n                <strong>Automation QA<\/strong> \u0434\u043b\u044f \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f UI- \u0442\u0430 API-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432,\r\n                \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0438 test automation framework, \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438,\r\n                \u0437\u0432\u0456\u0442\u043d\u0456\u0441\u0442\u044e \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0443 \u0442\u0435\u0441\u0442\u0456\u0432 \u0443 CI\/CD.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CORE TECHNOLOGIES -->\r\n\r\n        <div class=\"pw-tech-core\">\r\n\r\n            <div class=\"pw-tech-core-card\">\r\n\r\n                <div class=\"pw-tech-core-number\">\r\n                    01 \/ TEST AUTOMATION\r\n                <\/div>\r\n\r\n                <h3>Playwright<\/h3>\r\n\r\n                <p>\r\n                    \u041e\u0441\u043d\u043e\u0432\u043d\u0438\u0439 framework \u043a\u0443\u0440\u0441\u0443 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457\r\n                    \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0445 \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432.\r\n                    \u0412\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 UI- \u0442\u0430 API-\u0442\u0435\u0441\u0442\u0438,\r\n                    \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438, assertions,\r\n                    browser contexts \u0442\u0430 Playwright Test.\r\n                <\/p>\r\n\r\n                <div class=\"pw-tech-tags\">\r\n                    <span class=\"pw-tech-tag\">UI Testing<\/span>\r\n                    <span class=\"pw-tech-tag\">API Testing<\/span>\r\n                    <span class=\"pw-tech-tag\">Locators<\/span>\r\n                    <span class=\"pw-tech-tag\">Assertions<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-tech-core-card\">\r\n\r\n                <div class=\"pw-tech-core-number\">\r\n                    02 \/ PROGRAMMING\r\n                <\/div>\r\n\r\n                <h3>TypeScript<\/h3>\r\n\r\n                <p>\r\n                    \u041e\u0441\u043d\u043e\u0432\u043d\u0430 \u043c\u043e\u0432\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f \u043a\u0443\u0440\u0441\u0443.\r\n                    \u0412\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 TypeScript\r\n                    \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f \u0442\u0435\u0441\u0442\u0456\u0432, Page Objects,\r\n                    Fixtures, helper-\u043c\u0435\u0442\u043e\u0434\u0456\u0432 \u0442\u0430 \u0440\u043e\u0431\u043e\u0442\u0438\r\n                    \u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438.\r\n                <\/p>\r\n\r\n                <div class=\"pw-tech-tags\">\r\n                    <span class=\"pw-tech-tag\">Types<\/span>\r\n                    <span class=\"pw-tech-tag\">Classes<\/span>\r\n                    <span class=\"pw-tech-tag\">Async \/ Await<\/span>\r\n                    <span class=\"pw-tech-tag\">Interfaces<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-tech-core-card\">\r\n\r\n                <div class=\"pw-tech-core-number\">\r\n                    03 \/ API AUTOMATION\r\n                <\/div>\r\n\r\n                <h3>API Testing<\/h3>\r\n\r\n                <p>\r\n                    \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0438 API\r\n                    \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e Playwright: \u0432\u0438\u043a\u043e\u043d\u0443\u0432\u0430\u0442\u0438\r\n                    GET, POST, PUT \u0456 DELETE \u0437\u0430\u043f\u0438\u0442\u0438,\r\n                    \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0442\u0438 status code, headers\r\n                    \u0442\u0430 response body.\r\n                <\/p>\r\n\r\n                <div class=\"pw-tech-tags\">\r\n                    <span class=\"pw-tech-tag\">GET<\/span>\r\n                    <span class=\"pw-tech-tag\">POST<\/span>\r\n                    <span class=\"pw-tech-tag\">PUT<\/span>\r\n                    <span class=\"pw-tech-tag\">DELETE<\/span>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- REAL PROJECT -->\r\n\r\n        <div class=\"pw-tech-project\">\r\n\r\n            <div class=\"pw-tech-project-left\">\r\n\r\n                <div class=\"pw-tech-project-label\">\r\n                    Real Automation Project\r\n                <\/div>\r\n\r\n                <h3>\r\n                    \u041f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u0438\u0439 \u0441\u0442\u0435\u043a \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e QA Automation \u043f\u0440\u043e\u0454\u043a\u0442\u0443\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0457 \u0432\u0438\u0432\u0447\u0430\u044e\u0442\u044c\u0441\u044f \u043d\u0435 \u043e\u043a\u0440\u0435\u043c\u043e \u043e\u0434\u043d\u0430 \u0432\u0456\u0434 \u043e\u0434\u043d\u043e\u0457.\r\n                    \u041f\u0440\u043e\u0442\u044f\u0433\u043e\u043c \u043a\u0443\u0440\u0441\u0443 \u0432\u0438 \u043f\u043e\u0454\u0434\u043d\u0443\u0454\u0442\u0435 \u0457\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c\u0443\r\n                    \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0454\u043a\u0442\u0456 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-tech-code\">\r\n\r\n                    <div class=\"pw-tech-code-head\">\r\n                        playwright.config.ts\r\n                    <\/div>\r\n\r\n                    <pre><span class=\"green\">import<\/span> { defineConfig } <span class=\"green\">from<\/span> <span class=\"yellow\">'@playwright\/test'<\/span>;\r\n\r\n<span class=\"green\">export default<\/span> defineConfig({\r\n\r\n  testDir: <span class=\"yellow\">'.\/tests'<\/span>,\r\n\r\n  reporter: [\r\n    [<span class=\"yellow\">'html'<\/span>],\r\n    [<span class=\"yellow\">'allure-playwright'<\/span>]\r\n  ],\r\n\r\n  use: {\r\n    baseURL: <span class=\"yellow\">'https:\/\/project.com'<\/span>,\r\n    trace: <span class=\"yellow\">'on-first-retry'<\/span>\r\n  }\r\n\r\n});<\/pre>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- TOOLS -->\r\n\r\n            <div class=\"pw-tech-tools\">\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Page Object Model<\/strong>\r\n                        <span>\u0410\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0442\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Playwright Fixtures<\/strong>\r\n                        <span>Setup, reuse \u0442\u0430 \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0442\u0435\u0441\u0442\u0456\u0432<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Git & GitHub<\/strong>\r\n                        <span>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0432\u0435\u0440\u0441\u0456\u0439 \u0442\u0430 \u0440\u043e\u0431\u043e\u0442\u0430 \u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u0454\u043c<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Allure Report<\/strong>\r\n                        <span>\u0417\u0432\u0456\u0442\u0438 \u043f\u0440\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u0438\u0445 \u0442\u0435\u0441\u0442\u0456\u0432<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>GitHub Actions<\/strong>\r\n                        <span>CI\/CD \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Playwright-\u0442\u0435\u0441\u0442\u0456\u0432<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Visual Studio Code<\/strong>\r\n                        <span>\u041e\u0441\u043d\u043e\u0432\u043d\u0435 \u0441\u0435\u0440\u0435\u0434\u043e\u0432\u0438\u0449\u0435 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Node.js & npm<\/strong>\r\n                        <span>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0442\u0430 \u043a\u0435\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Faker<\/strong>\r\n                        <span>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0456\u044f \u0434\u0438\u043d\u0430\u043c\u0456\u0447\u043d\u0438\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0445 \u0434\u0430\u043d\u0438\u0445<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Chrome DevTools<\/strong>\r\n                        <span>\u0410\u043d\u0430\u043b\u0456\u0437 DOM, Network \u0442\u0430 \u043f\u043e\u0432\u0435\u0434\u0456\u043d\u043a\u0438 \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-tech-tool\">\r\n                    <span class=\"pw-tech-tool-dot\"><\/span>\r\n\r\n                    <div class=\"pw-tech-tool-text\">\r\n                        <strong>Playwright Trace Viewer<\/strong>\r\n                        <span>\u0410\u043d\u0430\u043b\u0456\u0437 \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0442\u0435\u0441\u0442\u0456\u0432 \u0442\u0430 \u043f\u0440\u0438\u0447\u0438\u043d \u0457\u0445 \u043f\u0430\u0434\u0456\u043d\u043d\u044f<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- BOTTOM -->\r\n\r\n        <div class=\"pw-tech-bottom\">\r\n            <strong>\u0413\u043e\u043b\u043e\u0432\u043d\u0435:<\/strong>\r\n            \u0443\u0441\u0456 \u0446\u0456 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0438 \u0432\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u0435 \u043d\u0435 \u043b\u0438\u0448\u0435 \u0432 \u0442\u0435\u043e\u0440\u0456\u0457.\r\n            \u041f\u0440\u043e\u0442\u044f\u0433\u043e\u043c \u043a\u0443\u0440\u0441\u0443 \u0432\u043e\u043d\u0438 \u043f\u043e\u0454\u0434\u043d\u0443\u044e\u0442\u044c\u0441\u044f \u0432\r\n            <strong>\r\n                \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0454\u043a\u0442\u0456 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0430 Playwright + TypeScript.\r\n            <\/strong>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bb0ee90 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"bb0ee90\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-42e22d4\" data-id=\"42e22d4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-01c0f30 elementor-widget elementor-widget-html\" data-id=\"01c0f30\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* =========================================================\r\n   PLAYWRIGHT REAL INTERVIEW\r\n   Elementor safe + mobile safe\r\n========================================================= *\/\r\n\r\n.pw-real-interview {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    padding: 110px 20px;\r\n    font-family: inherit;\r\n    color: #ffffff;\r\n\r\n    background:\r\n        radial-gradient(circle at 10% 10%, rgba(34,197,94,.13), transparent 26%),\r\n        radial-gradient(circle at 90% 85%, rgba(74,222,128,.07), transparent 28%),\r\n        linear-gradient(180deg,#06110b 0%,#08150e 100%);\r\n}\r\n\r\n.pw-real-interview,\r\n.pw-real-interview *,\r\n.pw-real-interview *::before,\r\n.pw-real-interview *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-real-interview * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-real-interview::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    background:\r\n        linear-gradient(rgba(74,222,128,.025) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(74,222,128,.025) 1px, transparent 1px);\r\n    background-size: 72px 72px;\r\n}\r\n\r\n.pw-real-interview-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1140px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* HEADER *\/\r\n\r\n.pw-real-interview-head {\r\n    width: 100%;\r\n    max-width: 880px;\r\n    margin: 0 auto 55px;\r\n    text-align: center;\r\n}\r\n\r\n.pw-real-interview-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 18px;\r\n    padding: 8px 14px;\r\n    border: 1px solid rgba(74,222,128,.22);\r\n    border-radius: 100px;\r\n    background: rgba(34,197,94,.08);\r\n    color: #4ade80;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-real-interview-badge::before {\r\n    content: \"\";\r\n    flex: 0 0 auto;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #4ade80;\r\n    box-shadow: 0 0 10px rgba(74,222,128,.7);\r\n}\r\n\r\n.pw-real-interview h2 {\r\n    margin: 0 0 22px !important;\r\n    padding: 0 !important;\r\n    color: #ffffff !important;\r\n    font-size: clamp(38px,5vw,60px) !important;\r\n    line-height: 1.06 !important;\r\n    font-weight: 850 !important;\r\n    letter-spacing: -1.8px !important;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-real-interview h2 span {\r\n    display: block;\r\n    color: #4ade80 !important;\r\n}\r\n\r\n.pw-real-interview-subtitle {\r\n    width: 100%;\r\n    max-width: 780px;\r\n    margin: 0 auto !important;\r\n    padding: 0 !important;\r\n    color: #9daca2 !important;\r\n    font-size: 18px !important;\r\n    line-height: 1.75 !important;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n\r\n\/* NOTE *\/\r\n\r\n.pw-real-interview-note {\r\n    width: 100%;\r\n    margin-bottom: 18px;\r\n    padding: 18px 20px;\r\n    border: 1px solid rgba(74,222,128,.12);\r\n    border-radius: 14px;\r\n    background: rgba(34,197,94,.05);\r\n    color: #aab9af;\r\n    font-size: 13px;\r\n    line-height: 1.65;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-real-interview-note strong {\r\n    color: #4ade80 !important;\r\n}\r\n\r\n\r\n\/* WINDOW *\/\r\n\r\n.pw-real-interview-window {\r\n    width: 100%;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(74,222,128,.14);\r\n    border-radius: 22px;\r\n    background: #09140d !important;\r\n    box-shadow: 0 30px 80px rgba(0,0,0,.28);\r\n}\r\n\r\n.pw-real-interview-topbar {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 15px;\r\n    width: 100%;\r\n    padding: 15px 20px;\r\n    border-bottom: 1px solid rgba(255,255,255,.06);\r\n    background: rgba(255,255,255,.025);\r\n}\r\n\r\n.pw-real-interview-dots {\r\n    display: flex;\r\n    gap: 6px;\r\n}\r\n\r\n.pw-real-interview-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: rgba(255,255,255,.16);\r\n}\r\n\r\n.pw-real-interview-status {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n    color: #809087;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: .6px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-real-interview-status::before {\r\n    content: \"\";\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #22c55e;\r\n    box-shadow: 0 0 10px rgba(34,197,94,.8);\r\n}\r\n\r\n\r\n\/* SECTIONS *\/\r\n\r\n.pw-real-interview-section {\r\n    width: 100%;\r\n    min-width: 0;\r\n    padding: 38px;\r\n    border-bottom: 1px solid rgba(255,255,255,.06);\r\n}\r\n\r\n.pw-real-interview-section:last-child {\r\n    border-bottom: 0;\r\n}\r\n\r\n.pw-real-interview-section-title {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-bottom: 28px;\r\n    color: #4ade80;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    letter-spacing: .7px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-real-interview-section-title::before {\r\n    content: \"\";\r\n    flex: 0 0 auto;\r\n    width: 28px;\r\n    height: 1px;\r\n    background: #22c55e;\r\n}\r\n\r\n\r\n\/* DIALOG *\/\r\n\r\n.pw-real-dialog {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-real-message {\r\n    display: grid;\r\n    grid-template-columns: 58px minmax(0,1fr);\r\n    gap: 16px;\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-real-avatar {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 12px;\r\n    font-size: 10px;\r\n    font-weight: 900;\r\n}\r\n\r\n.pw-real-avatar.interviewer {\r\n    border: 1px solid rgba(147,197,253,.16);\r\n    background: rgba(59,130,246,.08);\r\n    color: #93c5fd;\r\n}\r\n\r\n.pw-real-avatar.candidate {\r\n    border: 1px solid rgba(74,222,128,.18);\r\n    background: rgba(34,197,94,.08);\r\n    color: #4ade80;\r\n}\r\n\r\n.pw-real-message-content {\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-real-role {\r\n    margin-bottom: 7px;\r\n    color: #76877d;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: .5px;\r\n}\r\n\r\n.pw-real-question {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    color: #eef6f0 !important;\r\n    font-size: 18px !important;\r\n    line-height: 1.6 !important;\r\n    font-weight: 700 !important;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-real-answer {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    color: #aebbb2 !important;\r\n    font-size: 14px !important;\r\n    line-height: 1.8 !important;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-real-answer strong {\r\n    color: #e9f5ec !important;\r\n}\r\n\r\n\r\n\/* CODE WRAPPER *\/\r\n\r\n.pw-real-code-wrap {\r\n    width: auto;\r\n    min-width: 0;\r\n    margin: 22px 0 4px 74px;\r\n    overflow: hidden;\r\n}\r\n\r\n.pw-real-code-head {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 15px;\r\n    width: 100%;\r\n    padding: 10px 14px;\r\n    border: 1px solid rgba(255,255,255,.07);\r\n    border-bottom: 0;\r\n    border-radius: 11px 11px 0 0;\r\n    background: #0b1710 !important;\r\n    color: #718078 !important;\r\n    font-family: Consolas, \"SFMono-Regular\", \"Liberation Mono\", Menlo, monospace;\r\n    font-size: 9px;\r\n}\r\n\r\n\r\n\/* CODE - Elementor override *\/\r\n\r\n.pw-real-interview pre.pw-real-code,\r\n.pw-real-code {\r\n    display: block !important;\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n    max-width: 100% !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 20px !important;\r\n\r\n    overflow-x: hidden !important;\r\n    overflow-y: hidden !important;\r\n\r\n    border: 1px solid rgba(255,255,255,.07) !important;\r\n    border-radius: 0 0 11px 11px !important;\r\n    outline: 0 !important;\r\n\r\n    background: #050c08 !important;\r\n    background-color: #050c08 !important;\r\n    background-image: none !important;\r\n\r\n    box-shadow: none !important;\r\n\r\n    color: #cad6cd !important;\r\n\r\n    font-family:\r\n        Consolas,\r\n        \"SFMono-Regular\",\r\n        \"Liberation Mono\",\r\n        Menlo,\r\n        monospace !important;\r\n\r\n    font-size: 11px !important;\r\n    font-weight: 400 !important;\r\n    line-height: 1.75 !important;\r\n\r\n    text-align: left !important;\r\n\r\n    white-space: pre-wrap !important;\r\n    overflow-wrap: anywhere !important;\r\n    word-wrap: break-word !important;\r\n    word-break: normal !important;\r\n\r\n    tab-size: 2;\r\n}\r\n\r\n.pw-real-code .k {\r\n    color: #4ade80 !important;\r\n}\r\n\r\n.pw-real-code .f {\r\n    color: #93c5fd !important;\r\n}\r\n\r\n.pw-real-code .s {\r\n    color: #fde68a !important;\r\n}\r\n\r\n.pw-real-code .c {\r\n    color: #718078 !important;\r\n}\r\n\r\n\r\n\/* LIST *\/\r\n\r\n.pw-real-list {\r\n    margin: 15px 0 0 !important;\r\n    padding: 0 !important;\r\n    list-style: none !important;\r\n}\r\n\r\n.pw-real-list li {\r\n    position: relative;\r\n    margin-bottom: 10px;\r\n    padding-left: 22px;\r\n    color: #aebbb2;\r\n    font-size: 14px;\r\n    line-height: 1.7;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-real-list li::before {\r\n    content: \"\u2713\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    color: #4ade80;\r\n    font-weight: 900;\r\n}\r\n\r\n\r\n\/* TASK *\/\r\n\r\n.pw-real-task {\r\n    width: 100%;\r\n    margin-top: 22px;\r\n    padding: 24px;\r\n    border: 1px solid rgba(74,222,128,.12);\r\n    border-radius: 15px;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(34,197,94,.06),\r\n            rgba(255,255,255,.01)\r\n        );\r\n}\r\n\r\n.pw-real-task strong {\r\n    display: block;\r\n    margin-bottom: 12px;\r\n    color: #ffffff !important;\r\n    font-size: 16px;\r\n}\r\n\r\n.pw-real-task ul {\r\n    margin: 0 !important;\r\n    padding-left: 20px !important;\r\n    color: #a9b7ae;\r\n}\r\n\r\n.pw-real-task li {\r\n    margin-bottom: 7px;\r\n    color: #a9b7ae;\r\n    font-size: 13px;\r\n    line-height: 1.6;\r\n}\r\n\r\n\r\n\/* BOTTOM *\/\r\n\r\n.pw-real-interview-bottom {\r\n    width: 100%;\r\n    margin-top: 30px;\r\n    text-align: center;\r\n}\r\n\r\n.pw-real-interview-bottom strong {\r\n    display: block;\r\n    max-width: 850px;\r\n    margin: 0 auto 8px;\r\n    color: #ffffff !important;\r\n    font-size: 19px;\r\n    line-height: 1.45;\r\n}\r\n\r\n.pw-real-interview-bottom p {\r\n    width: 100%;\r\n    max-width: 760px;\r\n    margin: 0 auto !important;\r\n    color: #89998f !important;\r\n    font-size: 13px !important;\r\n    line-height: 1.7 !important;\r\n}\r\n\r\n\r\n\/* TABLET *\/\r\n\r\n@media (max-width: 850px) {\r\n    .pw-real-code-wrap {\r\n        margin-left: 0;\r\n    }\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .pw-real-interview {\r\n        padding: 70px 16px;\r\n    }\r\n\r\n    .pw-real-interview-head {\r\n        margin-bottom: 38px;\r\n        text-align: left;\r\n    }\r\n\r\n    .pw-real-interview h2 {\r\n        font-size: clamp(31px,9vw,39px) !important;\r\n        line-height: 1.08 !important;\r\n        letter-spacing: -1px !important;\r\n    }\r\n\r\n    .pw-real-interview-subtitle {\r\n        font-size: 16px !important;\r\n        line-height: 1.65 !important;\r\n    }\r\n\r\n    .pw-real-interview-topbar {\r\n        padding: 13px 15px;\r\n    }\r\n\r\n    .pw-real-interview-status {\r\n        font-size: 8px;\r\n    }\r\n\r\n    .pw-real-interview-section {\r\n        padding: 25px 18px;\r\n    }\r\n\r\n    .pw-real-message {\r\n        grid-template-columns: 42px minmax(0,1fr);\r\n        gap: 11px;\r\n    }\r\n\r\n    .pw-real-avatar {\r\n        width: 38px;\r\n        height: 38px;\r\n        border-radius: 10px;\r\n        font-size: 9px;\r\n    }\r\n\r\n    .pw-real-question {\r\n        font-size: 16px !important;\r\n        line-height: 1.55 !important;\r\n    }\r\n\r\n    .pw-real-answer {\r\n        font-size: 13.5px !important;\r\n        line-height: 1.75 !important;\r\n    }\r\n\r\n    .pw-real-list li {\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pw-real-code-wrap {\r\n        width: 100%;\r\n        margin: 20px 0 0;\r\n    }\r\n\r\n    .pw-real-interview pre.pw-real-code,\r\n    .pw-real-code {\r\n        padding: 16px !important;\r\n        font-size: 10px !important;\r\n        line-height: 1.7 !important;\r\n    }\r\n\r\n    .pw-real-task {\r\n        padding: 19px 17px;\r\n    }\r\n}\r\n\r\n\r\n\/* SMALL MOBILE *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .pw-real-interview {\r\n        padding: 58px 12px;\r\n    }\r\n\r\n    .pw-real-interview h2 {\r\n        font-size: 30px !important;\r\n    }\r\n\r\n    .pw-real-interview-section {\r\n        padding: 22px 14px;\r\n    }\r\n\r\n    .pw-real-message {\r\n        grid-template-columns: 38px minmax(0,1fr);\r\n        gap: 9px;\r\n    }\r\n\r\n    .pw-real-avatar {\r\n        width: 34px;\r\n        height: 34px;\r\n    }\r\n\r\n    .pw-real-interview pre.pw-real-code,\r\n    .pw-real-code {\r\n        padding: 13px !important;\r\n        font-size: 9.5px !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"pw-real-interview\">\r\n\r\n    <div class=\"pw-real-interview-container\">\r\n\r\n        <div class=\"pw-real-interview-head\">\r\n\r\n            <div class=\"pw-real-interview-badge\">\r\n                Interview Preparation\r\n            <\/div>\r\n\r\n            <h2>\r\n                \u0427\u0430\u0441\u0442\u0438\u043d\u0430 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0438\r\n                <span>Automation QA: Playwright + TypeScript<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"pw-real-interview-subtitle\">\r\n                \u041f\u0440\u0438\u043a\u043b\u0430\u0434 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0438\u0445 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u044c \u0456 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0438\u0445 \u0437\u0430\u0432\u0434\u0430\u043d\u044c,\r\n                \u044f\u043a\u0456 \u043c\u043e\u0436\u0443\u0442\u044c \u0437\u0443\u0441\u0442\u0440\u0456\u0447\u0430\u0442\u0438\u0441\u044f \u043d\u0430 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0456 Automation QA Engineer\r\n                \u0437\u0456 \u0437\u043d\u0430\u043d\u043d\u044f\u043c Playwright \u0456 TypeScript.\r\n                \u041d\u0430 \u043a\u0443\u0440\u0441\u0456 \u0432\u0438 \u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043d\u0435 \u043b\u0438\u0448\u0435 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438,\r\n                \u0430 \u0439 \u043f\u043e\u044f\u0441\u043d\u044e\u0432\u0430\u0442\u0438 \u0442\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0443\u0432\u0430\u0442\u0438 \u0441\u0432\u043e\u0457 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0456 \u0440\u0456\u0448\u0435\u043d\u043d\u044f.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pw-real-interview-note\">\r\n            <strong>\u0412\u0430\u0436\u043b\u0438\u0432\u043e:<\/strong>\r\n            \u0446\u0435 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0444\u043e\u0440\u043c\u0430\u0442\u0443 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0438. \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0456 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f\r\n            \u043c\u043e\u0436\u0443\u0442\u044c \u0432\u0456\u0434\u0440\u0456\u0437\u043d\u044f\u0442\u0438\u0441\u044f \u0437\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u0457, \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0442\u0430 \u0440\u0456\u0432\u043d\u044f \u043f\u043e\u0437\u0438\u0446\u0456\u0457.\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pw-real-interview-window\">\r\n\r\n            <div class=\"pw-real-interview-topbar\">\r\n\r\n                <div class=\"pw-real-interview-dots\">\r\n                    <span class=\"pw-real-interview-dot\"><\/span>\r\n                    <span class=\"pw-real-interview-dot\"><\/span>\r\n                    <span class=\"pw-real-interview-dot\"><\/span>\r\n                <\/div>\r\n\r\n                <div class=\"pw-real-interview-status\">\r\n                    Automation QA Technical Interview\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- EXPERIENCE -->\r\n\r\n            <div class=\"pw-real-interview-section\">\r\n\r\n                <div class=\"pw-real-interview-section-title\">\r\n                    \u0417\u043d\u0430\u0439\u043e\u043c\u0441\u0442\u0432\u043e \u0442\u0430 \u0434\u043e\u0441\u0432\u0456\u0434\r\n                <\/div>\r\n\r\n                <div class=\"pw-real-dialog\">\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar interviewer\">INT<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u0406\u043d\u0442\u0435\u0440\u0432'\u044e\u0435\u0440\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-question\">\r\n                                \u0420\u043e\u0437\u043a\u0430\u0436\u0456\u0442\u044c \u043f\u0440\u043e \u0441\u0432\u0456\u0439 \u0434\u043e\u0441\u0432\u0456\u0434 \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 Playwright.\r\n                                \u042f\u043a\u0456 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f \u0432\u0438 \u0432\u0438\u0440\u0456\u0448\u0443\u0432\u0430\u043b\u0438 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0446\u044c\u043e\u0433\u043e \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430?\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar candidate\">QA<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u041a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-answer\">\r\n                                \u042f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0432 <strong>Playwright + TypeScript<\/strong>\r\n                                \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432.\r\n                                \u041f\u0435\u0440\u0435\u0432\u0430\u0436\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0432 end-to-end \u0442\u0435\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0438\r\n                                \u043a\u043b\u044e\u0447\u043e\u0432\u0438\u0445 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457\u0432: \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u0457,\r\n                                \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0456\u0457, \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 \u0444\u043e\u0440\u043c\u0430\u043c\u0438, \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0457,\r\n                                \u043f\u043e\u0448\u0443\u043a\u0443 \u0442\u0430 \u0456\u043d\u0448\u0438\u0445 \u0434\u0456\u0439 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430.\r\n                                <br><br>\r\n                                \u0422\u0430\u043a\u043e\u0436 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0432 \u0437 API-\u0442\u0435\u0441\u0442\u0430\u043c\u0438, Page Object Model,\r\n                                Fixtures \u0456 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438. \u0422\u0435\u0441\u0442\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0438\u0441\u044f\r\n                                \u0432 Chromium, Firefox \u0456 WebKit. \u0414\u043b\u044f \u0437\u0432\u0456\u0442\u043d\u043e\u0441\u0442\u0456\r\n                                \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0432\u0441\u044f Allure, \u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\r\n                                \u0442\u0435\u0441\u0442\u0456\u0432 \u043d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u0432\u0441\u044f \u0447\u0435\u0440\u0435\u0437 CI\/CD.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- POM -->\r\n\r\n            <div class=\"pw-real-interview-section\">\r\n\r\n                <div class=\"pw-real-interview-section-title\">\r\n                    \u0410\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432\r\n                <\/div>\r\n\r\n                <div class=\"pw-real-dialog\">\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar interviewer\">INT<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u0406\u043d\u0442\u0435\u0440\u0432'\u044e\u0435\u0440\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-question\">\r\n                                \u042f\u043a \u0432\u0438 \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0443\u0454\u0442\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0442\u0435\u0441\u0442\u0456\u0432 \u0456\u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c\r\n                                Page Object Model \u0443 Playwright? \u0427\u043e\u043c\u0443 POM \u0432\u0430\u0436\u043b\u0438\u0432\u0438\u0439?\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar candidate\">QA<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u041a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-answer\">\r\n                                \u0423 Page Object Model \u043c\u0438 \u0432\u0438\u043d\u043e\u0441\u0438\u043c\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438\r\n                                \u0442\u0430 \u0434\u0456\u0457 \u0437\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u043e\u044e \u0432 \u043e\u043a\u0440\u0435\u043c\u0456 \u043a\u043b\u0430\u0441\u0438.\r\n                                \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, LoginPage \u043c\u043e\u0436\u0435 \u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u043f\u043e\u043b\u044f email,\r\n                                password, \u043a\u043d\u043e\u043f\u043a\u0443 Sign in \u0456 \u043c\u0435\u0442\u043e\u0434 login().\r\n                                <br><br>\r\n                                \u0421\u0430\u043c \u0442\u0435\u0441\u0442 \u043f\u0440\u0438 \u0446\u044c\u043e\u043c\u0443 \u043e\u043f\u0438\u0441\u0443\u0454 \u0431\u0456\u0437\u043d\u0435\u0441-\u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0439,\r\n                                \u0430 \u043d\u0435 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0456 \u0434\u0435\u0442\u0430\u043b\u0456 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0457 \u0437 DOM.\r\n                                \u0426\u0435 \u0437\u043c\u0435\u043d\u0448\u0443\u0454 \u0434\u0443\u0431\u043b\u044e\u0432\u0430\u043d\u043d\u044f, \u0440\u043e\u0431\u0438\u0442\u044c \u0442\u0435\u0441\u0442\u0438\r\n                                \u0431\u0456\u043b\u044c\u0448 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0438\u043c\u0438 \u0442\u0430 \u0441\u043f\u0440\u043e\u0449\u0443\u0454 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0443:\r\n                                \u044f\u043a\u0449\u043e \u043b\u043e\u043a\u0430\u0442\u043e\u0440 \u0437\u043c\u0456\u043d\u0438\u0432\u0441\u044f, \u0439\u043e\u0433\u043e \u0437\u0430\u0437\u0432\u0438\u0447\u0430\u0439 \u0434\u043e\u0441\u0442\u0430\u0442\u043d\u044c\u043e\r\n                                \u043e\u043d\u043e\u0432\u0438\u0442\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c\u0443 \u043c\u0456\u0441\u0446\u0456.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-real-code-wrap\">\r\n\r\n                    <div class=\"pw-real-code-head\">\r\n                        <span>pages\/LoginPage.ts<\/span>\r\n                        <span>TypeScript<\/span>\r\n                    <\/div>\r\n\r\n                    <pre class=\"pw-real-code\"><span class=\"k\">import<\/span> { Page, Locator } <span class=\"k\">from<\/span> <span class=\"s\">'@playwright\/test'<\/span>;\r\n\r\n<span class=\"k\">export class<\/span> LoginPage {\r\n\r\n  <span class=\"k\">readonly<\/span> page: Page;\r\n  <span class=\"k\">readonly<\/span> emailField: Locator;\r\n  <span class=\"k\">readonly<\/span> passwordField: Locator;\r\n  <span class=\"k\">readonly<\/span> loginButton: Locator;\r\n\r\n  <span class=\"f\">constructor<\/span>(page: Page) {\r\n    this.page = page;\r\n\r\n    this.emailField =\r\n      page.getByLabel(<span class=\"s\">'Email'<\/span>);\r\n\r\n    this.passwordField =\r\n      page.getByLabel(<span class=\"s\">'Password'<\/span>);\r\n\r\n    this.loginButton =\r\n      page.getByRole(<span class=\"s\">'button'<\/span>, {\r\n        name: <span class=\"s\">'Sign in'<\/span>\r\n      });\r\n  }\r\n\r\n  <span class=\"k\">async<\/span> <span class=\"f\">login<\/span>(\r\n    email: string,\r\n    password: string\r\n  ) {\r\n    <span class=\"k\">await<\/span> this.emailField.fill(email);\r\n    <span class=\"k\">await<\/span> this.passwordField.fill(password);\r\n    <span class=\"k\">await<\/span> this.loginButton.click();\r\n  }\r\n}<\/pre>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- ASYNC -->\r\n\r\n            <div class=\"pw-real-interview-section\">\r\n\r\n                <div class=\"pw-real-interview-section-title\">\r\n                    Async \/ Await\r\n                <\/div>\r\n\r\n                <div class=\"pw-real-dialog\">\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar interviewer\">INT<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u0406\u043d\u0442\u0435\u0440\u0432'\u044e\u0435\u0440\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-question\">\r\n                                \u042f\u043a \u0432\u0438 \u043f\u0440\u0430\u0446\u044e\u0454\u0442\u0435 \u0437 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0456\u044f\u043c\u0438\r\n                                \u0443 Playwright? \u041d\u0430\u0432\u0435\u0434\u0456\u0442\u044c \u043f\u0440\u0438\u043a\u043b\u0430\u0434.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar candidate\">QA<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u041a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-answer\">\r\n                                \u0411\u0456\u043b\u044c\u0448\u0456\u0441\u0442\u044c \u0434\u0456\u0439 Playwright \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0456\r\n                                \u0442\u0430 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u044e\u0442\u044c Promise, \u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u043e\u0457\r\n                                \u043f\u043e\u0441\u043b\u0456\u0434\u043e\u0432\u043d\u043e\u0441\u0442\u0456 \u0434\u0456\u0439 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f\r\n                                <strong>await<\/strong>.\r\n                                <br><br>\r\n                                \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u044f\u043a\u0449\u043e \u043f\u0456\u0441\u043b\u044f \u043d\u0430\u0442\u0438\u0441\u043a\u0430\u043d\u043d\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u044f \u043e\u0447\u0456\u043a\u0443\u044e\r\n                                \u043f\u0435\u0432\u043d\u0438\u0439 \u043c\u0435\u0440\u0435\u0436\u0435\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0442, \u043a\u0440\u0430\u0449\u0435 \u043f\u043e\u0447\u0430\u0442\u0438 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f\r\n                                response \u0434\u043e \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0434\u0456\u0457, \u044f\u043a\u0430 \u0446\u0435\u0439 \u0437\u0430\u043f\u0438\u0442\r\n                                \u0456\u043d\u0456\u0446\u0456\u044e\u0454. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0437\u0440\u0443\u0447\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\r\n                                <strong>Promise.all()<\/strong>.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-real-code-wrap\">\r\n\r\n                    <div class=\"pw-real-code-head\">\r\n                        <span>tests\/login.spec.ts<\/span>\r\n                        <span>Playwright<\/span>\r\n                    <\/div>\r\n\r\n                    <pre class=\"pw-real-code\"><span class=\"k\">const<\/span> [response] = <span class=\"k\">await<\/span> Promise.all([\r\n\r\n  page.waitForResponse(response =>\r\n    response.url().includes(<span class=\"s\">'\/api\/auth'<\/span>) &&\r\n    response.status() === 200\r\n  ),\r\n\r\n  page\r\n    .getByRole(<span class=\"s\">'button'<\/span>, {\r\n      name: <span class=\"s\">'Sign in'<\/span>\r\n    })\r\n    .click()\r\n]);\r\n\r\n<span class=\"k\">const<\/span> body =\r\n  <span class=\"k\">await<\/span> response.json();\r\n\r\nconsole.log(body);<\/pre>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- RELIABILITY -->\r\n\r\n            <div class=\"pw-real-interview-section\">\r\n\r\n                <div class=\"pw-real-interview-section-title\">\r\n                    \u0421\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0456\u0441\u0442\u044c \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432\r\n                <\/div>\r\n\r\n                <div class=\"pw-real-dialog\">\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar interviewer\">INT<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u0406\u043d\u0442\u0435\u0440\u0432'\u044e\u0435\u0440\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-question\">\r\n                                \u042f\u043a \u0437\u0440\u043e\u0431\u0438\u0442\u0438 Playwright-\u0442\u0435\u0441\u0442\u0438 \u0431\u0456\u043b\u044c\u0448 \u043d\u0430\u0434\u0456\u0439\u043d\u0438\u043c\u0438\r\n                                \u0442\u0430 \u0441\u0442\u0456\u0439\u043a\u0438\u043c\u0438 \u0434\u043e \u0437\u043c\u0456\u043d UI?\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"pw-real-message\">\r\n\r\n                        <div class=\"pw-real-avatar candidate\">QA<\/div>\r\n\r\n                        <div class=\"pw-real-message-content\">\r\n\r\n                            <div class=\"pw-real-role\">\r\n                                \u041a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\r\n                            <\/div>\r\n\r\n                            <p class=\"pw-real-answer\">\r\n                                \u042f \u043d\u0430\u043c\u0430\u0433\u0430\u044e\u0441\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438,\r\n                                \u044f\u043a\u0456 \u043c\u0435\u043d\u0448\u0435 \u0437\u0430\u043b\u0435\u0436\u0430\u0442\u044c \u0432\u0456\u0434 \u0440\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443,\r\n                                \u0430 \u0442\u0430\u043a\u043e\u0436 \u0432\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0456 \u043c\u0435\u0445\u0430\u043d\u0456\u0437\u043c\u0438 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f Playwright.\r\n                            <\/p>\r\n\r\n                            <ul class=\"pw-real-list\">\r\n\r\n                                <li>\r\n                                    \u0412\u0456\u0434\u0434\u0430\u044e \u043f\u0435\u0440\u0435\u0432\u0430\u0433\u0443 <strong>getByRole()<\/strong>,\r\n                                    getByLabel(), getByText() \u0430\u0431\u043e data-testid\r\n                                    \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u043d\u0435\u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0438\u0445 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0456\u0432.\r\n                                <\/li>\r\n\r\n                                <li>\r\n                                    \u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e web-first assertions:\r\n                                    expect(locator).toBeVisible(),\r\n                                    toHaveText(), toHaveURL().\r\n                                <\/li>\r\n\r\n                                <li>\r\n                                    \u041d\u0435 \u0434\u043e\u0434\u0430\u044e \u0444\u0456\u043a\u0441\u043e\u0432\u0430\u043d\u0456 sleep \u0456 timeout,\r\n                                    \u044f\u043a\u0449\u043e \u043c\u043e\u0436\u043d\u0430 \u0434\u043e\u0447\u0435\u043a\u0430\u0442\u0438\u0441\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u0443.\r\n                                <\/li>\r\n\r\n                                <li>\r\n                                    \u0420\u043e\u0437\u0434\u0456\u043b\u044f\u044e \u0442\u0435\u0441\u0442\u043e\u0432\u0443 \u043b\u043e\u0433\u0456\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 Page Objects,\r\n                                    Fixtures \u0456 \u0434\u043e\u043f\u043e\u043c\u0456\u0436\u043d\u0456 \u043c\u0435\u0442\u043e\u0434\u0438.\r\n                                <\/li>\r\n\r\n                                <li>\r\n                                    \u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e API \u0434\u043b\u044f \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0445 \u0434\u0430\u043d\u0438\u0445,\r\n                                    \u043a\u043e\u043b\u0438 \u0446\u0435 \u0440\u043e\u0431\u0438\u0442\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0439 \u0448\u0432\u0438\u0434\u0448\u0438\u043c \u0456 \u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0456\u0448\u0438\u043c.\r\n                                <\/li>\r\n\r\n                                <li>\r\n                                    \u0414\u043b\u044f \u043c\u0435\u0440\u0435\u0436\u0435\u0432\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457\u0432 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\r\n                                    waitForResponse(), route() \u0442\u0430 \u0456\u043d\u0448\u0456\r\n                                    \u043c\u043e\u0436\u043b\u0438\u0432\u043e\u0441\u0442\u0456 Playwright.\r\n                                <\/li>\r\n\r\n                            <\/ul>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- PRACTICAL -->\r\n\r\n            <div class=\"pw-real-interview-section\">\r\n\r\n                <div class=\"pw-real-interview-section-title\">\r\n                    \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0435 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-real-message\">\r\n\r\n                    <div class=\"pw-real-avatar interviewer\">INT<\/div>\r\n\r\n                    <div class=\"pw-real-message-content\">\r\n\r\n                        <div class=\"pw-real-role\">\r\n                            \u0406\u043d\u0442\u0435\u0440\u0432'\u044e\u0435\u0440\r\n                        <\/div>\r\n\r\n                        <p class=\"pw-real-question\">\r\n                            \u0423\u044f\u0432\u0456\u0442\u044c, \u0449\u043e \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438 \u0444\u043e\u0440\u043c\u0443 \u043b\u043e\u0433\u0456\u043d\u0443.\r\n                            \u042f\u043a \u0431\u0438 \u0432\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u043b\u0438 \u0446\u0435\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0439?\r\n                        <\/p>\r\n\r\n\r\n                        <div class=\"pw-real-task\">\r\n\r\n                            <strong>\r\n                                \u0412\u0438\u043c\u043e\u0433\u0438:\r\n                            <\/strong>\r\n\r\n                            <ul>\r\n                                <li>\r\n                                    \u041f\u0456\u0434 \u0447\u0430\u0441 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u043d\u0435\u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0438\u0445 \u0434\u0430\u043d\u0438\u0445\r\n                                    \u0437'\u044f\u0432\u043b\u044f\u0454\u0442\u044c\u0441\u044f \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443.\r\n                                <\/li>\r\n\r\n                                <li>\r\n                                    \u041f\u0456\u0441\u043b\u044f \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u0456\u043d\u0443\r\n                                    \u0432\u0456\u0434\u0431\u0443\u0432\u0430\u0454\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0445\u0456\u0434 \u043d\u0430 Dashboard.\r\n                                <\/li>\r\n\r\n                                <li>\r\n                                    \u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435 Playwright Test \u0442\u0430 assertions.\r\n                                <\/li>\r\n                            <\/ul>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-real-code-wrap\">\r\n\r\n                    <div class=\"pw-real-code-head\">\r\n                        <span>tests\/login.spec.ts<\/span>\r\n                        <span>Practical Task<\/span>\r\n                    <\/div>\r\n\r\n                    <pre class=\"pw-real-code\"><span class=\"k\">import<\/span> { test, expect } <span class=\"k\">from<\/span> <span class=\"s\">'@playwright\/test'<\/span>;\r\n\r\ntest(\r\n  <span class=\"s\">'Login form validation'<\/span>,\r\n  <span class=\"k\">async<\/span> ({ page }) => {\r\n\r\n  <span class=\"k\">await<\/span> page.goto(<span class=\"s\">'\/login'<\/span>);\r\n\r\n  <span class=\"c\">\/\/ Invalid login<\/span>\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .getByLabel(<span class=\"s\">'Email'<\/span>)\r\n    .fill(<span class=\"s\">'wrong@example.com'<\/span>);\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .getByLabel(<span class=\"s\">'Password'<\/span>)\r\n    .fill(<span class=\"s\">'wrongPassword'<\/span>);\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .getByRole(<span class=\"s\">'button'<\/span>, {\r\n      name: <span class=\"s\">'Sign in'<\/span>\r\n    })\r\n    .click();\r\n\r\n  <span class=\"k\">await<\/span> expect(\r\n    page.getByText(\r\n      <span class=\"s\">'Invalid email or password'<\/span>\r\n    )\r\n  ).toBeVisible();\r\n\r\n\r\n  <span class=\"c\">\/\/ Valid login<\/span>\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .getByLabel(<span class=\"s\">'Email'<\/span>)\r\n    .fill(<span class=\"s\">'user@example.com'<\/span>);\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .getByLabel(<span class=\"s\">'Password'<\/span>)\r\n    .fill(<span class=\"s\">'Test1234!'<\/span>);\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .getByRole(<span class=\"s\">'button'<\/span>, {\r\n      name: <span class=\"s\">'Sign in'<\/span>\r\n    })\r\n    .click();\r\n\r\n  <span class=\"k\">await<\/span> expect(page)\r\n    .toHaveURL(<span class=\"s\">\/dashboard\/<\/span>);\r\n\r\n});<\/pre>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pw-real-interview-bottom\">\r\n\r\n            <strong>\r\n                \u041d\u0430 \u043a\u0443\u0440\u0441\u0456 \u0432\u0438 \u0433\u043e\u0442\u0443\u0454\u0442\u0435\u0441\u044f \u043d\u0435 \u043b\u0438\u0448\u0435 \u043f\u0438\u0441\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438,\r\n                \u0430 \u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0443\u0432\u0430\u0442\u0438 \u0441\u0432\u043e\u0457 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0456 \u0440\u0456\u0448\u0435\u043d\u043d\u044f\r\n            <\/strong>\r\n\r\n            <p>\r\n                \u0420\u043e\u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f \u0437 Playwright, TypeScript, \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0456\u0432,\r\n                async\/await, Page Object Model, Fixtures, API Testing,\r\n                Git, CI\/CD, \u0430\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0438 framework \u0442\u0430 \u0442\u0438\u043f\u043e\u0432\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0438\u0445\r\n                \u0437\u0430\u0432\u0434\u0430\u043d\u044c \u043d\u0430 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0430\u0445 Automation QA.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bf061e0 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"bf061e0\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-854707b\" data-id=\"854707b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-baade1a elementor-widget elementor-widget-html\" data-id=\"baade1a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n.pw-format {\r\n    position: relative;\r\n    overflow: hidden;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    padding: 110px 20px;\r\n    font-family: inherit;\r\n    color: #102117;\r\n    background:\r\n        radial-gradient(circle at 15% 20%, rgba(34,197,94,.10), transparent 24%),\r\n        radial-gradient(circle at 85% 80%, rgba(74,222,128,.08), transparent 26%),\r\n        linear-gradient(180deg, #fbfefc 0%, #f4faf6 100%);\r\n}\r\n\r\n.pw-format,\r\n.pw-format * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-format * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-format::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n        linear-gradient(rgba(22,163,74,.035) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(22,163,74,.035) 1px, transparent 1px);\r\n    background-size: 72px 72px;\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-format::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 520px;\r\n    height: 520px;\r\n    right: -240px;\r\n    top: 80px;\r\n    border: 1px solid rgba(22,163,74,.10);\r\n    border-radius: 50%;\r\n    box-shadow:\r\n        0 0 80px rgba(34,197,94,.04),\r\n        inset 0 0 60px rgba(34,197,94,.02);\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-format-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.pw-format-head {\r\n    max-width: 850px;\r\n    margin: 0 auto 60px;\r\n    text-align: center;\r\n}\r\n\r\n.pw-format-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-bottom: 18px;\r\n    padding: 8px 15px;\r\n    border: 1px solid rgba(22,163,74,.16);\r\n    border-radius: 100px;\r\n    background: rgba(34,197,94,.07);\r\n    color: #15803d;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    letter-spacing: .5px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-format-badge::before {\r\n    content: \"\";\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #22c55e;\r\n    box-shadow: 0 0 10px rgba(34,197,94,.45);\r\n}\r\n\r\n.pw-format h2 {\r\n    margin: 0 0 20px;\r\n    color: #102117;\r\n    font-size: clamp(36px, 5vw, 56px);\r\n    line-height: 1.1;\r\n    font-weight: 800;\r\n    letter-spacing: -1.7px;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-format h2 span {\r\n    color: #16a34a;\r\n}\r\n\r\n.pw-format-subtitle {\r\n    max-width: 760px;\r\n    margin: 0 auto;\r\n    color: #607066;\r\n    font-size: 18px;\r\n    line-height: 1.75;\r\n}\r\n\r\n.pw-format-subtitle strong {\r\n    color: #193521;\r\n}\r\n\r\n.pw-format-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    gap: 18px;\r\n}\r\n\r\n.pw-format-card {\r\n    position: relative;\r\n    overflow: hidden;\r\n    min-width: 0;\r\n    min-height: 265px;\r\n    padding: 28px;\r\n    border: 1px solid rgba(22,163,74,.10);\r\n    border-radius: 20px;\r\n    background: rgba(255,255,255,.88);\r\n    box-shadow: 0 14px 38px rgba(30,70,45,.06);\r\n    transition:\r\n        transform .25s ease,\r\n        border-color .25s ease,\r\n        box-shadow .25s ease;\r\n}\r\n\r\n.pw-format-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 24px;\r\n    width: 70px;\r\n    height: 2px;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            #22c55e,\r\n            rgba(34,197,94,.35),\r\n            transparent\r\n        );\r\n}\r\n\r\n.pw-format-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 130px;\r\n    height: 130px;\r\n    right: -65px;\r\n    bottom: -65px;\r\n    border-radius: 50%;\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(34,197,94,.08),\r\n            transparent 70%\r\n        );\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-format-card:hover {\r\n    transform: translateY(-5px);\r\n    border-color: rgba(22,163,74,.22);\r\n    box-shadow: 0 20px 50px rgba(30,70,45,.10);\r\n}\r\n\r\n.pw-format-number {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 46px;\r\n    height: 46px;\r\n    margin-bottom: 20px;\r\n    border: 1px solid rgba(22,163,74,.14);\r\n    border-radius: 13px;\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(34,197,94,.12),\r\n            rgba(34,197,94,.04)\r\n        );\r\n    color: #16a34a;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n}\r\n\r\n.pw-format-card h3 {\r\n    margin: 0 0 12px;\r\n    color: #102117;\r\n    font-size: 21px;\r\n    font-weight: 760;\r\n    line-height: 1.3;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-format-card p {\r\n    margin: 0;\r\n    color: #66746a;\r\n    font-size: 14px;\r\n    line-height: 1.7;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-format-card strong {\r\n    color: #27452f;\r\n}\r\n\r\n.pw-format-bottom {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: 10px;\r\n    margin-top: 24px;\r\n}\r\n\r\n.pw-format-stat {\r\n    padding: 18px 14px;\r\n    border: 1px solid rgba(22,163,74,.10);\r\n    border-radius: 14px;\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.90),\r\n            rgba(34,197,94,.035)\r\n        );\r\n    text-align: center;\r\n}\r\n\r\n.pw-format-stat strong {\r\n    display: block;\r\n    margin-bottom: 4px;\r\n    color: #16a34a;\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n}\r\n\r\n.pw-format-stat span {\r\n    color: #718078;\r\n    font-size: 11px;\r\n    line-height: 1.35;\r\n}\r\n\r\n@media (max-width: 980px) {\r\n    .pw-format {\r\n        padding: 85px 18px;\r\n    }\r\n\r\n    .pw-format-grid {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .pw-format-bottom {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n    .pw-format {\r\n        padding: 68px 16px;\r\n    }\r\n\r\n    .pw-format::before {\r\n        background-size: 50px 50px;\r\n        opacity: .7;\r\n    }\r\n\r\n    .pw-format::after {\r\n        width: 380px;\r\n        height: 380px;\r\n        right: -250px;\r\n        top: 100px;\r\n    }\r\n\r\n    .pw-format-head {\r\n        margin-bottom: 40px;\r\n        text-align: left;\r\n    }\r\n\r\n    .pw-format-badge {\r\n        font-size: 10px;\r\n        padding: 7px 11px;\r\n    }\r\n\r\n    .pw-format h2 {\r\n        font-size: clamp(31px, 9vw, 38px);\r\n        line-height: 1.08;\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .pw-format h2 span {\r\n        display: block;\r\n        margin-top: 4px;\r\n    }\r\n\r\n    .pw-format-subtitle {\r\n        font-size: 16px;\r\n        line-height: 1.62;\r\n    }\r\n\r\n    .pw-format-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 12px;\r\n    }\r\n\r\n    .pw-format-card {\r\n        min-height: auto;\r\n        padding: 22px 19px;\r\n        border-radius: 16px;\r\n    }\r\n\r\n    .pw-format-card:hover {\r\n        transform: none;\r\n    }\r\n\r\n    .pw-format-number {\r\n        width: 42px;\r\n        height: 42px;\r\n        margin-bottom: 15px;\r\n        border-radius: 11px;\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pw-format-card h3 {\r\n        font-size: 18px;\r\n    }\r\n\r\n    .pw-format-card p {\r\n        font-size: 13.5px;\r\n        line-height: 1.62;\r\n    }\r\n\r\n    .pw-format-bottom {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n        gap: 8px;\r\n        margin-top: 16px;\r\n    }\r\n\r\n    .pw-format-stat {\r\n        padding: 14px 8px;\r\n    }\r\n\r\n    .pw-format-stat strong {\r\n        font-size: 14px;\r\n    }\r\n\r\n    .pw-format-stat span {\r\n        font-size: 10px;\r\n    }\r\n}\r\n\r\n@media (max-width: 390px) {\r\n    .pw-format {\r\n        padding: 58px 12px;\r\n    }\r\n\r\n    .pw-format h2 {\r\n        font-size: 30px;\r\n    }\r\n\r\n    .pw-format-subtitle {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .pw-format-card {\r\n        padding: 19px 15px;\r\n    }\r\n\r\n    .pw-format-card h3 {\r\n        font-size: 17px;\r\n    }\r\n\r\n    .pw-format-card p {\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pw-format-bottom {\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pw-format\">\r\n\r\n```\r\n<div class=\"pw-format-container\">\r\n\r\n    <div class=\"pw-format-head\">\r\n\r\n        <div class=\"pw-format-badge\">\r\n            \u0424\u043e\u0440\u043c\u0430\u0442 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n        <\/div>\r\n\r\n        <h2>\r\n            \u042f\u043a \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c\r\n            <span>\u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043d\u0430 \u043a\u0443\u0440\u0441\u0456<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"pw-format-subtitle\">\r\n            \u0426\u0435 \u043d\u0435 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0456 \u0432\u0435\u0431\u0456\u043d\u0430\u0440\u0438. \u041d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c\r\n            <strong>\u0443 \u0436\u0438\u0432\u043e\u043c\u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u0456 \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c<\/strong>,\r\n            \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u044e \u043d\u0430 \u043a\u043e\u0436\u043d\u043e\u043c\u0443 \u0437\u0430\u043d\u044f\u0442\u0442\u0456 \u0442\u0430 \u043f\u043e\u0441\u0442\u0456\u0439\u043d\u0438\u043c \u0437\u0432\u043e\u0440\u043e\u0442\u043d\u0438\u043c \u0437\u0432'\u044f\u0437\u043a\u043e\u043c.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"pw-format-grid\">\r\n\r\n        <div class=\"pw-format-card\">\r\n\r\n            <div class=\"pw-format-number\">\r\n                01\r\n            <\/div>\r\n\r\n            <h3>\r\n                \u0416\u0438\u0432\u0456 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0432 Microsoft Teams\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u041a\u043e\u0436\u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u043d\u043b\u0430\u0439\u043d \u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0447\u0430\u0441\u0456.\r\n                \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0442\u0430\u0432\u0438\u0442\u0438 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u0442\u0438 \u0441\u043a\u043b\u0430\u0434\u043d\u0456 \u043c\u043e\u043c\u0435\u043d\u0442\u0438\r\n                \u0442\u0430 \u043f\u0438\u0441\u0430\u0442\u0438 \u043a\u043e\u0434 \u0440\u0430\u0437\u043e\u043c \u0456\u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-card\">\r\n\r\n            <div class=\"pw-format-number\">\r\n                02\r\n            <\/div>\r\n\r\n            <h3>\r\n                \u041d\u0435\u0432\u0435\u043b\u0438\u043a\u0456 \u0433\u0440\u0443\u043f\u0438\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u0423 \u0433\u0440\u0443\u043f\u0456 \u0434\u043e <strong>5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432<\/strong>, \u0442\u043e\u043c\u0443 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\r\n                \u043c\u043e\u0436\u0435 \u043f\u0440\u0438\u0434\u0456\u043b\u0438\u0442\u0438 \u0443\u0432\u0430\u0433\u0443 \u043a\u043e\u0436\u043d\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u043d\u0438\u043a\u0443 \u0442\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0442\u0438\r\n                \u0440\u043e\u0437\u0456\u0431\u0440\u0430\u0442\u0438\u0441\u044f \u0437 \u043f\u043e\u043c\u0438\u043b\u043a\u0430\u043c\u0438 \u0432 \u043a\u043e\u0434\u0456.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-card\">\r\n\r\n            <div class=\"pw-format-number\">\r\n                03\r\n            <\/div>\r\n\r\n            <h3>\r\n                \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0430 \u043a\u043e\u0436\u043d\u043e\u043c\u0443 \u0437\u0430\u043d\u044f\u0442\u0442\u0456\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u0412\u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u0443\u0445\u0430\u0454\u0442\u0435 \u0442\u0435\u043e\u0440\u0456\u044e \u2014 \u0432\u0438 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u0442\u0435 \u0442\u0435\u0441\u0442\u0438,\r\n                \u043f\u0440\u0430\u0446\u044e\u0454\u0442\u0435 \u0437 Playwright, TypeScript, API\r\n                \u0442\u0430 \u043f\u043e\u0441\u0442\u0443\u043f\u043e\u0432\u043e \u0431\u0443\u0434\u0443\u0454\u0442\u0435 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 automation framework.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-card\">\r\n\r\n            <div class=\"pw-format-number\">\r\n                04\r\n            <\/div>\r\n\r\n            <h3>\r\n                \u0414\u043e\u043c\u0430\u0448\u043d\u0456 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u041f\u0456\u0441\u043b\u044f \u0437\u0430\u043d\u044f\u0442\u044c \u0432\u0438 \u043e\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0456 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f,\r\n                \u044f\u043a\u0456 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u044e\u0442\u044c \u0437\u0430\u043a\u0440\u0456\u043f\u0438\u0442\u0438 \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b \u0456 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f\r\n                \u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e \u0432\u0438\u0440\u0456\u0448\u0443\u0432\u0430\u0442\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u0456 QA-\u0437\u0430\u0434\u0430\u0447\u0456.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-card\">\r\n\r\n            <div class=\"pw-format-number\">\r\n                05\r\n            <\/div>\r\n\r\n            <h3>\r\n                \u041f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0430 \u0442\u0430 \u0440\u043e\u0437\u0431\u0456\u0440 \u043a\u043e\u0434\u0443\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u0412\u0438\u043a\u043b\u0430\u0434\u0430\u0447 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u0437\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0438 \u043f\u043e\u043c\u0438\u043b\u043a\u0438,\r\n                \u043f\u043e\u043a\u0440\u0430\u0449\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0442\u0435\u0441\u0442\u0456\u0432, \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438,\r\n                Page Object Model \u0442\u0430 \u044f\u043a\u0456\u0441\u0442\u044c automation-\u043a\u043e\u0434\u0443.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-card\">\r\n\r\n            <div class=\"pw-format-number\">\r\n                06\r\n            <\/div>\r\n\r\n            <h3>\r\n                \u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u043f\u0440\u043e\u0442\u044f\u0433\u043e\u043c \u043a\u0443\u0440\u0441\u0443\r\n            <\/h3>\r\n\r\n            <p>\r\n                \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0442\u0430\u0432\u0438\u0442\u0438 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f \u043c\u0456\u0436 \u0437\u0430\u043d\u044f\u0442\u0442\u044f\u043c\u0438,\r\n                \u043e\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0443 \u0437 \u0434\u043e\u043c\u0430\u0448\u043d\u0456\u043c\u0438 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f\u043c\u0438\r\n                \u0442\u0430 \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0438, \u044f\u043a\u0456 \u0432\u0438\u043d\u0438\u043a\u0430\u044e\u0442\u044c\r\n                \u043f\u0456\u0434 \u0447\u0430\u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"pw-format-bottom\">\r\n\r\n        <div class=\"pw-format-stat\">\r\n            <strong>2 \u043c\u0456\u0441\u044f\u0446\u0456<\/strong>\r\n            <span>\u0422\u0440\u0438\u0432\u0430\u043b\u0456\u0441\u0442\u044c \u043a\u0443\u0440\u0441\u0443<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-stat\">\r\n            <strong>2 \u0440\u0430\u0437\u0438 \u043d\u0430 \u0442\u0438\u0436\u0434\u0435\u043d\u044c<\/strong>\r\n            <span>\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0456 \u0437\u0430\u043d\u044f\u0442\u0442\u044f<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-stat\">\r\n            <strong>\u0434\u043e 5 \u043e\u0441\u0456\u0431<\/strong>\r\n            <span>\u041d\u0435\u0432\u0435\u043b\u0438\u043a\u0430 \u0433\u0440\u0443\u043f\u0430<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"pw-format-stat\">\r\n            <strong>Live<\/strong>\r\n            <span>\u0417\u0430\u043d\u044f\u0442\u0442\u044f \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c<\/span>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n```\r\n\r\n<\/section>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-545b33a elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"545b33a\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;background_motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-79fbd18\" data-id=\"79fbd18\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f783fb5 elementor-widget elementor-widget-html\" data-id=\"f783fb5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* =========================================================\r\n   REAL PROJECT\r\n   Elementor-safe \/ Mobile-safe\r\n========================================================= *\/\r\n\r\n.pw-project {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    padding: 110px 20px;\r\n\r\n    font-family: inherit;\r\n\r\n    color: #ffffff;\r\n\r\n    background:\r\n        radial-gradient(circle at 12% 15%, rgba(34,197,94,.14), transparent 26%),\r\n        radial-gradient(circle at 90% 80%, rgba(74,222,128,.06), transparent 28%),\r\n        linear-gradient(180deg,#06110b 0%,#08150e 100%);\r\n}\r\n\r\n.pw-project,\r\n.pw-project *,\r\n.pw-project *::before,\r\n.pw-project *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-project * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-project-container {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    width: 100%;\r\n    max-width: 1140px;\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.pw-project-head {\r\n    width: 100%;\r\n    max-width: 900px;\r\n\r\n    margin: 0 auto 60px;\r\n\r\n    text-align: center;\r\n}\r\n\r\n.pw-project-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n\r\n    margin-bottom: 18px;\r\n\r\n    padding: 8px 14px;\r\n\r\n    border: 1px solid rgba(74,222,128,.22);\r\n    border-radius: 100px;\r\n\r\n    background: rgba(34,197,94,.08);\r\n\r\n    color: #4ade80;\r\n\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-project-badge::before {\r\n    content: \"\";\r\n\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #4ade80;\r\n\r\n    box-shadow: 0 0 10px rgba(74,222,128,.7);\r\n}\r\n\r\n.pw-project h2 {\r\n    margin: 0 0 22px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-size: clamp(40px,5vw,60px) !important;\r\n    line-height: 1.06 !important;\r\n    font-weight: 850 !important;\r\n\r\n    letter-spacing: -1.7px !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-project h2 span {\r\n    display: block;\r\n\r\n    color: #4ade80 !important;\r\n}\r\n\r\n.pw-project-subtitle {\r\n    width: 100%;\r\n    max-width: 800px;\r\n\r\n    margin: 0 auto !important;\r\n    padding: 0 !important;\r\n\r\n    color: #9daca2 !important;\r\n\r\n    font-size: 18px !important;\r\n    line-height: 1.75 !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-project-subtitle strong {\r\n    color: #e7f5ea !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN LAYOUT\r\n========================================================= *\/\r\n\r\n.pw-project-layout {\r\n    display: grid;\r\n\r\n    grid-template-columns: .9fr 1.1fr;\r\n\r\n    gap: 32px;\r\n\r\n    align-items: start;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT LIST\r\n========================================================= *\/\r\n\r\n.pw-project-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    gap: 14px;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-project-item {\r\n    display: grid;\r\n\r\n    grid-template-columns: 48px minmax(0,1fr);\r\n\r\n    gap: 16px;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    padding: 20px;\r\n\r\n    border: 1px solid rgba(74,222,128,.10);\r\n    border-radius: 16px;\r\n\r\n    background: rgba(255,255,255,.025);\r\n\r\n    transition:\r\n        transform .2s ease,\r\n        border-color .2s ease,\r\n        background .2s ease;\r\n}\r\n\r\n.pw-project-item:hover {\r\n    transform: translateY(-2px);\r\n\r\n    border-color: rgba(74,222,128,.20);\r\n\r\n    background: rgba(34,197,94,.04);\r\n}\r\n\r\n.pw-project-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    border: 1px solid rgba(74,222,128,.16);\r\n    border-radius: 11px;\r\n\r\n    background: rgba(34,197,94,.07);\r\n\r\n    color: #4ade80;\r\n\r\n    font-size: 10px;\r\n    font-weight: 900;\r\n}\r\n\r\n.pw-project-item h3 {\r\n    margin: 0 0 7px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #f2f8f3 !important;\r\n\r\n    font-size: 16px !important;\r\n    line-height: 1.35 !important;\r\n    font-weight: 800 !important;\r\n}\r\n\r\n.pw-project-item p {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    color: #96a69b !important;\r\n\r\n    font-size: 12.5px !important;\r\n    line-height: 1.7 !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT VISUAL\r\n========================================================= *\/\r\n\r\n.pw-project-visual {\r\n    width: 100%;\r\n    min-width: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOCKUP\r\n========================================================= *\/\r\n\r\n.pw-project-mockup {\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    overflow: hidden;\r\n\r\n    border: 1px solid rgba(255,255,255,.08);\r\n    border-radius: 20px;\r\n\r\n    background: #050c08 !important;\r\n    background-color: #050c08 !important;\r\n\r\n    box-shadow: 0 28px 70px rgba(0,0,0,.28);\r\n}\r\n\r\n\r\n\/* TOPBAR *\/\r\n\r\n.pw-project-topbar {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 14px;\r\n\r\n    width: 100%;\r\n\r\n    padding: 13px 16px;\r\n\r\n    border-bottom: 1px solid rgba(255,255,255,.06);\r\n\r\n    background: #0b1710 !important;\r\n}\r\n\r\n.pw-project-dots {\r\n    display: flex;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    gap: 5px;\r\n}\r\n\r\n.pw-project-dots span {\r\n    display: block;\r\n\r\n    width: 7px;\r\n    height: 7px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: rgba(255,255,255,.18);\r\n}\r\n\r\n.pw-project-path {\r\n    min-width: 0;\r\n\r\n    color: #77847c;\r\n\r\n    font-family:\r\n        Consolas,\r\n        \"SFMono-Regular\",\r\n        \"Liberation Mono\",\r\n        monospace;\r\n\r\n    font-size: 8.5px;\r\n\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BODY\r\n========================================================= *\/\r\n\r\n.pw-project-body {\r\n    display: grid;\r\n\r\n    grid-template-columns: 170px minmax(0,1fr);\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    background: #050c08 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SIDEBAR\r\n========================================================= *\/\r\n\r\n.pw-project-sidebar {\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    padding: 14px 10px;\r\n\r\n    border-right: 1px solid rgba(255,255,255,.06);\r\n\r\n    background: #08110b !important;\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n.pw-project-sidebar-title {\r\n    margin-bottom: 12px;\r\n\r\n    padding: 0 7px;\r\n\r\n    color: #647168;\r\n\r\n    font-size: 8px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-file {\r\n    width: 100%;\r\n\r\n    margin-bottom: 2px;\r\n\r\n    padding: 5px 7px;\r\n\r\n    border-radius: 6px;\r\n\r\n    color: #78867d;\r\n\r\n    font-family:\r\n        Consolas,\r\n        \"SFMono-Regular\",\r\n        monospace;\r\n\r\n    font-size: 8px;\r\n    line-height: 1.45;\r\n\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n.pw-file.folder {\r\n    color: #a2afa6;\r\n}\r\n\r\n.pw-file.active {\r\n    background: rgba(34,197,94,.08);\r\n\r\n    color: #4ade80;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CODE\r\n   IMPORTANT: Elementor-safe\r\n========================================================= *\/\r\n\r\n.pw-project-code {\r\n    display: block !important;\r\n\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n    max-width: 100% !important;\r\n\r\n    margin: 0 !important;\r\n\r\n    padding: 24px 20px !important;\r\n\r\n    overflow-x: hidden !important;\r\n    overflow-y: hidden !important;\r\n\r\n    border: 0 !important;\r\n    border-radius: 0 !important;\r\n\r\n    outline: 0 !important;\r\n\r\n    background: #050c08 !important;\r\n    background-color: #050c08 !important;\r\n    background-image: none !important;\r\n\r\n    box-shadow: none !important;\r\n\r\n    color: #d6e2d9 !important;\r\n\r\n    font-family:\r\n        Consolas,\r\n        \"SFMono-Regular\",\r\n        \"Liberation Mono\",\r\n        Menlo,\r\n        monospace !important;\r\n\r\n    font-size: 10.5px !important;\r\n    font-weight: 400 !important;\r\n    line-height: 1.75 !important;\r\n\r\n    text-align: left !important;\r\n\r\n    white-space: pre-wrap !important;\r\n\r\n    overflow-wrap: anywhere !important;\r\n    word-wrap: break-word !important;\r\n    word-break: normal !important;\r\n\r\n    tab-size: 2;\r\n}\r\n\r\n.pw-project-code .k {\r\n    color: #4ade80 !important;\r\n}\r\n\r\n.pw-project-code .m {\r\n    color: #93c5fd !important;\r\n}\r\n\r\n.pw-project-code .s {\r\n    color: #fde68a !important;\r\n}\r\n\r\n.pw-project-code .c {\r\n    color: #66766c !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FOOTER\r\n========================================================= *\/\r\n\r\n.pw-project-footer {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    gap: 12px;\r\n\r\n    width: 100%;\r\n\r\n    padding: 11px 15px;\r\n\r\n    border-top: 1px solid rgba(255,255,255,.06);\r\n\r\n    background: #08110b !important;\r\n\r\n    color: #708078;\r\n\r\n    font-size: 8.5px;\r\n}\r\n\r\n.pw-project-status {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 7px;\r\n\r\n    color: #4ade80;\r\n}\r\n\r\n.pw-project-status::before {\r\n    content: \"\";\r\n\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22c55e;\r\n\r\n    box-shadow: 0 0 9px rgba(34,197,94,.7);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FLOW \/ STACK\r\n========================================================= *\/\r\n\r\n.pw-project-flow {\r\n    display: grid;\r\n\r\n    grid-template-columns: repeat(5,minmax(0,1fr));\r\n\r\n    gap: 8px;\r\n\r\n    width: 100%;\r\n\r\n    margin-top: 12px;\r\n}\r\n\r\n.pw-project-flow-item {\r\n    min-width: 0;\r\n\r\n    padding: 12px 8px;\r\n\r\n    border: 1px solid rgba(74,222,128,.10);\r\n    border-radius: 11px;\r\n\r\n    background: rgba(255,255,255,.025);\r\n\r\n    text-align: center;\r\n}\r\n\r\n.pw-project-flow-item strong {\r\n    display: block;\r\n\r\n    margin-bottom: 3px;\r\n\r\n    color: #4ade80 !important;\r\n\r\n    font-size: 10px;\r\n    line-height: 1.3;\r\n}\r\n\r\n.pw-project-flow-item span {\r\n    display: block;\r\n\r\n    color: #718078;\r\n\r\n    font-size: 7.5px;\r\n    line-height: 1.35;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULT\r\n========================================================= *\/\r\n\r\n.pw-project-result {\r\n    width: 100%;\r\n    max-width: 950px;\r\n\r\n    margin: 38px auto 0;\r\n\r\n    padding: 30px;\r\n\r\n    border: 1px solid rgba(74,222,128,.13);\r\n    border-radius: 20px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(34,197,94,.07),\r\n            rgba(255,255,255,.02)\r\n        );\r\n\r\n    text-align: center;\r\n}\r\n\r\n.pw-project-result-label {\r\n    margin-bottom: 10px;\r\n\r\n    color: #4ade80;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-project-result > strong {\r\n    display: block;\r\n\r\n    max-width: 800px;\r\n\r\n    margin: 0 auto 12px;\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-size: 21px;\r\n    line-height: 1.4;\r\n}\r\n\r\n.pw-project-result p {\r\n    max-width: 780px;\r\n\r\n    margin: 0 auto !important;\r\n\r\n    color: #94a39a !important;\r\n\r\n    font-size: 13px !important;\r\n    line-height: 1.75 !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 950px) {\r\n\r\n    .pw-project-layout {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .pw-project {\r\n        padding: 70px 16px;\r\n    }\r\n\r\n    .pw-project-head {\r\n        margin-bottom: 40px;\r\n\r\n        text-align: left;\r\n    }\r\n\r\n    .pw-project h2 {\r\n        font-size: clamp(31px,9vw,40px) !important;\r\n\r\n        line-height: 1.08 !important;\r\n\r\n        letter-spacing: -1px !important;\r\n    }\r\n\r\n    .pw-project-subtitle {\r\n        font-size: 16px !important;\r\n\r\n        line-height: 1.65 !important;\r\n    }\r\n\r\n    .pw-project-item {\r\n        grid-template-columns: 42px minmax(0,1fr);\r\n\r\n        gap: 12px;\r\n\r\n        padding: 17px;\r\n    }\r\n\r\n    .pw-project-icon {\r\n        width: 38px;\r\n        height: 38px;\r\n    }\r\n\r\n    .pw-project-body {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .pw-project-sidebar {\r\n        display: none;\r\n    }\r\n\r\n    .pw-project-code {\r\n        padding: 18px 16px !important;\r\n\r\n        font-size: 9.8px !important;\r\n\r\n        line-height: 1.7 !important;\r\n    }\r\n\r\n    .pw-project-flow {\r\n        grid-template-columns: repeat(2,minmax(0,1fr));\r\n    }\r\n\r\n    .pw-project-flow-item:last-child {\r\n        grid-column: 1 \/ -1;\r\n    }\r\n\r\n    .pw-project-result {\r\n        padding: 24px 18px;\r\n    }\r\n\r\n    .pw-project-result > strong {\r\n        font-size: 18px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .pw-project {\r\n        padding: 58px 12px;\r\n    }\r\n\r\n    .pw-project h2 {\r\n        font-size: 30px !important;\r\n    }\r\n\r\n    .pw-project-item {\r\n        padding: 15px 13px;\r\n    }\r\n\r\n    .pw-project-code {\r\n        padding: 15px 12px !important;\r\n\r\n        font-size: 9px !important;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"pw-project\">\r\n\r\n    <div class=\"pw-project-container\">\r\n\r\n\r\n        <!-- HEADER -->\r\n\r\n        <div class=\"pw-project-head\">\r\n\r\n            <div class=\"pw-project-badge\">\r\n                \u0420\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442\r\n            <\/div>\r\n\r\n            <h2>\r\n                \u041f\u0440\u0430\u0446\u044e\u0439\u0442\u0435 \u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u043c \u043f\u0440\u043e\u0454\u043a\u0442\u043e\u043c\r\n                <span>\u0456 \u0441\u0442\u0432\u043e\u0440\u044e\u0439\u0442\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"pw-project-subtitle\">\r\n                \u041f\u0440\u043e\u0442\u044f\u0433\u043e\u043c \u043a\u0443\u0440\u0441\u0443 \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437\r\n                <strong>\u0440\u0435\u0430\u043b\u044c\u043d\u0438\u043c \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u043e\u043c<\/strong>\r\n                \u0456 \u043f\u043e\u0435\u0442\u0430\u043f\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0434\u043b\u044f \u043d\u044c\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044e:\r\n                UI-\u0442\u0435\u0441\u0442\u0438, API-\u0442\u0435\u0441\u0442\u0438, Page Object Model,\r\n                Fixtures, \u0437\u0432\u0456\u0442\u043d\u0456\u0441\u0442\u044c Allure \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0456 \u0437\u0430\u043f\u0443\u0441\u043a\u0438 \u0432 CI\/CD.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- MAIN -->\r\n\r\n        <div class=\"pw-project-layout\">\r\n\r\n\r\n            <!-- LEFT -->\r\n\r\n            <div class=\"pw-project-list\">\r\n\r\n\r\n                <div class=\"pw-project-item\">\r\n\r\n                    <div class=\"pw-project-icon\">\r\n                        01\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <h3>\r\n                            \u0420\u0435\u0430\u043b\u044c\u043d\u0456 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0456 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            \u0412\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u044e,\r\n                            \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0456\u044e, \u0444\u043e\u0440\u043c\u0438, \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u044e, \u043f\u043e\u0448\u0443\u043a,\r\n                            \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443\r\n                            \u0442\u0430 \u0456\u043d\u0448\u0456 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0456 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457 \u043f\u0440\u043e\u0454\u043a\u0442\u0443.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-project-item\">\r\n\r\n                    <div class=\"pw-project-icon\">\r\n                        02\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <h3>\r\n                            UI Automation\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            \u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0438\u0445 UI-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432\r\n                            \u043d\u0430 TypeScript + Playwright \u0437 assertions,\r\n                            \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0442\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u044e \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u0430\u0446\u0456\u0454\u044e\r\n                            \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457\u0432.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-project-item\">\r\n\r\n                    <div class=\"pw-project-icon\">\r\n                        03\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <h3>\r\n                            API Testing\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            \u0420\u043e\u0431\u043e\u0442\u0430 \u0437 API \u043f\u0440\u043e\u0454\u043a\u0442\u0443: GET, POST, PUT \u0456 DELETE,\r\n                            \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0430 status code, response body\r\n                            \u0442\u0430 \u043f\u043e\u0454\u0434\u043d\u0430\u043d\u043d\u044f API \u0437 UI-\u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044f\u043c\u0438.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-project-item\">\r\n\r\n                    <div class=\"pw-project-icon\">\r\n                        04\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <h3>\r\n                            Page Object Model\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            \u0412\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u043d\u043e\u0441\u0438\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438 \u0442\u0430 \u0434\u0456\u0457\r\n                            \u0432 Page Objects, \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\r\n                            \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u043d\u0456 \u043c\u0435\u0442\u043e\u0434\u0438 \u0442\u0430 \u0431\u0443\u0434\u0443\u0432\u0430\u0442\u0438\r\n                            \u0437\u0440\u0443\u0447\u043d\u0443 \u0434\u043b\u044f \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 automation-\u043f\u0440\u043e\u0454\u043a\u0442\u0443.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pw-project-item\">\r\n\r\n                    <div class=\"pw-project-icon\">\r\n                        05\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <h3>\r\n                            Allure \u0442\u0430 CI\/CD\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            \u041d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0432\u0456\u0442\u043d\u043e\u0441\u0442\u0456, \u0430\u043d\u0430\u043b\u0456\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0456\u0432\r\n                            \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432 \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u0439\r\n                            \u0437\u0430\u043f\u0443\u0441\u043a Playwright-\u0442\u0435\u0441\u0442\u0456\u0432 \u0447\u0435\u0440\u0435\u0437 CI\/CD.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- RIGHT -->\r\n\r\n            <div class=\"pw-project-visual\">\r\n\r\n\r\n                <div class=\"pw-project-mockup\">\r\n\r\n\r\n                    <!-- TOP -->\r\n\r\n                    <div class=\"pw-project-topbar\">\r\n\r\n                        <div class=\"pw-project-dots\">\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"pw-project-path\">\r\n                            playwright-automation \/ tests \/ registration.spec.ts\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- BODY -->\r\n\r\n                    <div class=\"pw-project-body\">\r\n\r\n\r\n                        <!-- FILES -->\r\n\r\n                        <div class=\"pw-project-sidebar\">\r\n\r\n                            <div class=\"pw-project-sidebar-title\">\r\n                                Explorer\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file folder\">\r\n                                \u25be playwright-automation\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file folder\">\r\n                                &nbsp;&nbsp;\u25be tests\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file active\">\r\n                                &nbsp;&nbsp;&nbsp;&nbsp;registration.spec.ts\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file\">\r\n                                &nbsp;&nbsp;&nbsp;&nbsp;login.spec.ts\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file folder\">\r\n                                &nbsp;&nbsp;\u25be pages\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file\">\r\n                                &nbsp;&nbsp;&nbsp;&nbsp;RegistrationPage.ts\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file\">\r\n                                &nbsp;&nbsp;&nbsp;&nbsp;AuthenticationPage.ts\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file folder\">\r\n                                &nbsp;&nbsp;\u25be fixtures\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file\">\r\n                                &nbsp;&nbsp;&nbsp;&nbsp;users.ts\r\n                            <\/div>\r\n\r\n                            <div class=\"pw-file\">\r\n                                &nbsp;&nbsp;playwright.config.ts\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <!-- CODE -->\r\n\r\n                        <div class=\"pw-project-code\"><span class=\"k\">import<\/span> { test, expect } <span class=\"k\">from<\/span> <span class=\"s\">'@playwright\/test'<\/span>;\r\n\r\ntest(<span class=\"s\">'user can register'<\/span>, <span class=\"k\">async<\/span> ({ page }) => {\r\n\r\n  <span class=\"c\">\/\/ Open registration page<\/span>\r\n  <span class=\"k\">await<\/span> page.<span class=\"m\">goto<\/span>(\r\n    <span class=\"s\">'\/action\/register'<\/span>\r\n  );\r\n\r\n  <span class=\"c\">\/\/ Fill registration form<\/span>\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .<span class=\"m\">locator<\/span>(<span class=\"s\">'#email'<\/span>)\r\n    .<span class=\"m\">fill<\/span>(<span class=\"s\">'qa@test.com'<\/span>);\r\n\r\n  <span class=\"k\">await<\/span> page\r\n    .<span class=\"m\">locator<\/span>(<span class=\"s\">'#first_name'<\/span>)\r\n    .<span class=\"m\">fill<\/span>(<span class=\"s\">'Alex'<\/span>);\r\n\r\n  <span class=\"c\">\/\/ Verify entered data<\/span>\r\n\r\n  <span class=\"k\">await<\/span> expect(\r\n    page.<span class=\"m\">locator<\/span>(<span class=\"s\">'#email'<\/span>)\r\n  ).<span class=\"m\">toHaveValue<\/span>(\r\n    <span class=\"s\">'qa@test.com'<\/span>\r\n  );\r\n\r\n});<\/div>\r\n\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- FOOTER -->\r\n\r\n                    <div class=\"pw-project-footer\">\r\n\r\n                        <div class=\"pw-project-status\">\r\n                            Tests passed\r\n                        <\/div>\r\n\r\n                        <div>\r\n                            TypeScript \u2022 Playwright\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- STACK -->\r\n\r\n                <div class=\"pw-project-flow\">\r\n\r\n                    <div class=\"pw-project-flow-item\">\r\n                        <strong>UI<\/strong>\r\n                        <span>Automation<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-project-flow-item\">\r\n                        <strong>API<\/strong>\r\n                        <span>Testing<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-project-flow-item\">\r\n                        <strong>POM<\/strong>\r\n                        <span>Architecture<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-project-flow-item\">\r\n                        <strong>Allure<\/strong>\r\n                        <span>Reporting<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-project-flow-item\">\r\n                        <strong>CI\/CD<\/strong>\r\n                        <span>Test Runs<\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- RESULT -->\r\n\r\n        <div class=\"pw-project-result\">\r\n\r\n            <div class=\"pw-project-result-label\">\r\n                \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0443\u0440\u0441\u0443\r\n            <\/div>\r\n\r\n            <strong>\r\n                \u0420\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f\r\n                \u043d\u0430 TypeScript + Playwright\r\n            <\/strong>\r\n\r\n            <p>\r\n                \u0423 \u043f\u0440\u043e\u0446\u0435\u0441\u0456 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432\u0438 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0435 \u043f\u0440\u043e\u0454\u043a\u0442 \u0437 UI- \u0442\u0430 API-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0430\u043c\u0438,\r\n                Page Object Model, Fixtures, \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438,\r\n                \u0437\u0432\u0456\u0442\u0430\u043c\u0438 Allure \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0442\u0435\u0441\u0442\u0456\u0432 \u0443 CI\/CD.\r\n                \u0412\u0438 \u0437\u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u043e\u0437\u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u043f\u0440\u043e\u0454\u043a\u0442 \u043d\u0430 GitHub \u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e\r\n                \u044f\u043a \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0441\u0432\u043e\u0454\u0457 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u0457 \u0440\u043e\u0431\u043e\u0442\u0438 \u043d\u0430 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0456\u0439 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0456.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f02c948 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"f02c948\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2cc8d52\" data-id=\"2cc8d52\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-597549f elementor-widget elementor-widget-html\" data-id=\"597549f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* =========================================================\r\n   PLAYWRIGHT OUTCOME\r\n   Elementor-safe \/ Mobile-safe\r\n========================================================= *\/\r\n\r\n.pw-outcome {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    padding: 110px 20px;\r\n\r\n    font-family: inherit;\r\n    color: #102117;\r\n\r\n    background:\r\n        radial-gradient(circle at 10% 15%, rgba(34,197,94,.08), transparent 24%),\r\n        radial-gradient(circle at 90% 85%, rgba(74,222,128,.05), transparent 26%),\r\n        linear-gradient(180deg,#ffffff 0%,#f6fbf7 100%);\r\n}\r\n\r\n.pw-outcome,\r\n.pw-outcome *,\r\n.pw-outcome *::before,\r\n.pw-outcome *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-outcome * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-outcome-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1140px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.pw-outcome-head {\r\n    width: 100%;\r\n    max-width: 860px;\r\n    margin: 0 auto 58px;\r\n    text-align: center;\r\n}\r\n\r\n.pw-outcome-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n\r\n    margin-bottom: 18px;\r\n    padding: 8px 14px;\r\n\r\n    border: 1px solid rgba(22,163,74,.16);\r\n    border-radius: 100px;\r\n\r\n    background: rgba(34,197,94,.07);\r\n\r\n    color: #15803d;\r\n\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-outcome-badge::before {\r\n    content: \"\";\r\n    width: 6px;\r\n    height: 6px;\r\n    flex: 0 0 auto;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22c55e;\r\n    box-shadow: 0 0 10px rgba(34,197,94,.5);\r\n}\r\n\r\n.pw-outcome h2 {\r\n    margin: 0 0 22px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #102117 !important;\r\n\r\n    font-size: clamp(40px,5vw,60px) !important;\r\n    line-height: 1.06 !important;\r\n    font-weight: 850 !important;\r\n\r\n    letter-spacing: -1.7px !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-outcome h2 span {\r\n    display: block;\r\n    color: #16a34a !important;\r\n}\r\n\r\n.pw-outcome-subtitle {\r\n    width: 100%;\r\n    max-width: 780px;\r\n\r\n    margin: 0 auto !important;\r\n    padding: 0 !important;\r\n\r\n    color: #617066 !important;\r\n\r\n    font-size: 18px !important;\r\n    line-height: 1.75 !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-outcome-subtitle strong {\r\n    color: #1d4328 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n.pw-outcome-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3,minmax(0,1fr));\r\n    gap: 16px;\r\n\r\n    width: 100%;\r\n}\r\n\r\n.pw-outcome-card {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    padding: 28px;\r\n\r\n    overflow: hidden;\r\n\r\n    border: 1px solid rgba(22,163,74,.10);\r\n    border-radius: 20px;\r\n\r\n    background: rgba(255,255,255,.94);\r\n\r\n    box-shadow: 0 14px 40px rgba(24,70,39,.045);\r\n\r\n    transition:\r\n        transform .2s ease,\r\n        border-color .2s ease,\r\n        box-shadow .2s ease;\r\n}\r\n\r\n.pw-outcome-card::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    right: -28px;\r\n    bottom: -40px;\r\n\r\n    width: 120px;\r\n    height: 120px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: rgba(34,197,94,.045);\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.pw-outcome-card:hover {\r\n    transform: translateY(-3px);\r\n\r\n    border-color: rgba(22,163,74,.20);\r\n\r\n    box-shadow: 0 18px 46px rgba(24,70,39,.07);\r\n}\r\n\r\n.pw-outcome-icon {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    margin-bottom: 24px;\r\n\r\n    border: 1px solid rgba(22,163,74,.14);\r\n    border-radius: 11px;\r\n\r\n    background: rgba(34,197,94,.07);\r\n\r\n    color: #16a34a;\r\n\r\n    font-size: 10px;\r\n    font-weight: 900;\r\n}\r\n\r\n.pw-outcome-card h3 {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    margin: 0 0 12px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #16331e !important;\r\n\r\n    font-size: 18px !important;\r\n    line-height: 1.35 !important;\r\n    font-weight: 800 !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-outcome-card p {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    color: #6c7a71 !important;\r\n\r\n    font-size: 13px !important;\r\n    line-height: 1.75 !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-outcome-card p strong {\r\n    color: #285335 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FINAL RESULT\r\n========================================================= *\/\r\n\r\n.pw-outcome-final {\r\n    display: grid;\r\n    grid-template-columns: minmax(0,1fr) auto;\r\n\r\n    gap: 35px;\r\n    align-items: center;\r\n\r\n    width: 100%;\r\n\r\n    margin-top: 24px;\r\n    padding: 38px;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 22px;\r\n\r\n    background:\r\n        radial-gradient(circle at 90% 15%, rgba(74,222,128,.12), transparent 26%),\r\n        linear-gradient(135deg,#07130c,#0a1710);\r\n\r\n    box-shadow: 0 24px 65px rgba(15,50,25,.13);\r\n}\r\n\r\n.pw-outcome-final > div:first-child {\r\n    min-width: 0;\r\n}\r\n\r\n.pw-outcome-final-label {\r\n    margin-bottom: 12px;\r\n\r\n    color: #4ade80;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-outcome-final h3 {\r\n    max-width: 780px;\r\n\r\n    margin: 0 0 14px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-size: clamp(24px,3vw,34px) !important;\r\n    line-height: 1.2 !important;\r\n    font-weight: 800 !important;\r\n\r\n    letter-spacing: -.5px;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-outcome-final p {\r\n    max-width: 760px;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    color: #a0afa5 !important;\r\n\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n\r\n\/* CODE MARK *\/\r\n\r\n.pw-outcome-final-code {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 145px;\r\n    height: 145px;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    border: 1px solid rgba(74,222,128,.14);\r\n    border-radius: 24px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(34,197,94,.12),\r\n            rgba(255,255,255,.02)\r\n        );\r\n\r\n    color: #4ade80 !important;\r\n\r\n    font-family:\r\n        Consolas,\r\n        \"SFMono-Regular\",\r\n        \"Liberation Mono\",\r\n        Menlo,\r\n        monospace;\r\n\r\n    font-size: 27px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: -1px;\r\n\r\n    box-shadow:\r\n        inset 0 1px 0 rgba(255,255,255,.04),\r\n        0 14px 40px rgba(0,0,0,.15);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STACK\r\n========================================================= *\/\r\n\r\n.pw-outcome-stack {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n\r\n    gap: 8px;\r\n\r\n    width: 100%;\r\n\r\n    margin-top: 20px;\r\n}\r\n\r\n.pw-outcome-stack span {\r\n    display: inline-flex;\r\n    align-items: center;\r\n\r\n    min-height: 34px;\r\n\r\n    padding: 8px 12px;\r\n\r\n    border: 1px solid rgba(22,163,74,.10);\r\n    border-radius: 100px;\r\n\r\n    background: rgba(255,255,255,.9);\r\n\r\n    color: #4b6253;\r\n\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    line-height: 1.2;\r\n\r\n    box-shadow: 0 5px 18px rgba(24,70,39,.025);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 950px) {\r\n\r\n    .pw-outcome-grid {\r\n        grid-template-columns: repeat(2,minmax(0,1fr));\r\n    }\r\n\r\n    .pw-outcome-final {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .pw-outcome-final-code {\r\n        width: 100%;\r\n        height: auto;\r\n        min-height: 90px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .pw-outcome {\r\n        padding: 70px 16px;\r\n    }\r\n\r\n    .pw-outcome-head {\r\n        margin-bottom: 40px;\r\n        text-align: left;\r\n    }\r\n\r\n    .pw-outcome h2 {\r\n        font-size: clamp(31px,9vw,40px) !important;\r\n        line-height: 1.08 !important;\r\n        letter-spacing: -1px !important;\r\n    }\r\n\r\n    .pw-outcome-subtitle {\r\n        font-size: 16px !important;\r\n        line-height: 1.65 !important;\r\n    }\r\n\r\n    .pw-outcome-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .pw-outcome-card {\r\n        padding: 24px 20px;\r\n    }\r\n\r\n    .pw-outcome-icon {\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .pw-outcome-final {\r\n        gap: 24px;\r\n        margin-top: 18px;\r\n        padding: 26px 20px;\r\n    }\r\n\r\n    .pw-outcome-final h3 {\r\n        font-size: 24px !important;\r\n    }\r\n\r\n    .pw-outcome-final p {\r\n        font-size: 13.5px !important;\r\n    }\r\n\r\n    .pw-outcome-final-code {\r\n        min-height: 78px;\r\n        border-radius: 16px;\r\n        font-size: 22px;\r\n    }\r\n\r\n    .pw-outcome-stack {\r\n        justify-content: flex-start;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .pw-outcome {\r\n        padding: 58px 12px;\r\n    }\r\n\r\n    .pw-outcome h2 {\r\n        font-size: 30px !important;\r\n    }\r\n\r\n    .pw-outcome-card {\r\n        padding: 21px 17px;\r\n    }\r\n\r\n    .pw-outcome-final {\r\n        padding: 22px 17px;\r\n    }\r\n\r\n    .pw-outcome-stack span {\r\n        font-size: 9px;\r\n        padding: 7px 10px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"pw-outcome\">\r\n\r\n    <div class=\"pw-outcome-container\">\r\n\r\n        <!-- HEADER -->\r\n\r\n        <div class=\"pw-outcome-head\">\r\n\r\n            <div class=\"pw-outcome-badge\">\r\n                \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n            <\/div>\r\n\r\n            <h2>\r\n                \u0429\u043e \u0432\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u0454\u0442\u0435\r\n                <span>\u043f\u0456\u0441\u043b\u044f \u043a\u0443\u0440\u0441\u0443<\/span>\r\n            <\/h2>\r\n\r\n            <p class=\"pw-outcome-subtitle\">\r\n                \u0413\u043e\u043b\u043e\u0432\u043d\u0430 \u043c\u0435\u0442\u0430 \u043a\u0443\u0440\u0441\u0443 \u2014 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0437\u043d\u0430\u0439\u043e\u043c\u0438\u0442\u0438 \u0432\u0430\u0441 \u0456\u0437 Playwright,\r\n                \u0430 \u043d\u0430\u0432\u0447\u0438\u0442\u0438 <strong>\u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0442\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438\r\n                \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/strong> \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0445 \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u0456\u0432.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- GRID -->\r\n\r\n        <div class=\"pw-outcome-grid\">\r\n\r\n\r\n            <div class=\"pw-outcome-card\">\r\n\r\n                <div class=\"pw-outcome-icon\">\r\n                    01\r\n                <\/div>\r\n\r\n                <h3>\r\n                    \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0456 \u043d\u0430\u0432\u0438\u0447\u043a\u0438 Playwright\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u0412\u0438 \u0437\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 UI-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438\r\n                    \u043d\u0430 TypeScript + Playwright, \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438,\r\n                    assertions, \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f\u043c\u0438 \u0442\u0430 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u043c\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044f\u043c\u0438.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-outcome-card\">\r\n\r\n                <div class=\"pw-outcome-icon\">\r\n                    02\r\n                <\/div>\r\n\r\n                <h3>\r\n                    \u0414\u043e\u0441\u0432\u0456\u0434 \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u043c \u043f\u0440\u043e\u0454\u043a\u0442\u043e\u043c\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u041f\u0456\u0434 \u0447\u0430\u0441 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438\r\n                    <strong>\u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442<\/strong> \u0442\u0430 \u0432\u0438\u0440\u0456\u0448\u0443\u0432\u0430\u0442\u0438 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f,\r\n                    \u044f\u043a\u0456 \u0437\u0443\u0441\u0442\u0440\u0456\u0447\u0430\u044e\u0442\u044c\u0441\u044f \u0432 \u0440\u043e\u0431\u043e\u0442\u0456 Automation QA Engineer.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-outcome-card\">\r\n\r\n                <div class=\"pw-outcome-icon\">\r\n                    03\r\n                <\/div>\r\n\r\n                <h3>\r\n                    \u0412\u043b\u0430\u0441\u043d\u0438\u0439 Automation Framework\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0454\u043a\u0442\u0443:\r\n                    Page Object Model, Fixtures, Hooks, \u0442\u0435\u0441\u0442\u043e\u0432\u0456 \u0434\u0430\u043d\u0456,\r\n                    \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u044e \u0442\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u043d\u0456 \u043c\u0435\u0442\u043e\u0434\u0438.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-outcome-card\">\r\n\r\n                <div class=\"pw-outcome-icon\">\r\n                    04\r\n                <\/div>\r\n\r\n                <h3>\r\n                    UI + API Automation\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u0412\u0438 \u0437\u043c\u043e\u0436\u0435\u0442\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u043d\u0435 \u043b\u0438\u0448\u0435 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441,\r\n                    \u0430 \u0439 API, \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0442\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0456 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\r\n                    \u0442\u0430 \u043f\u043e\u0454\u0434\u043d\u0443\u0432\u0430\u0442\u0438 API \u0439 UI \u0443 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044f\u0445.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-outcome-card\">\r\n\r\n                <div class=\"pw-outcome-icon\">\r\n                    05\r\n                <\/div>\r\n\r\n                <h3>\r\n                    Git, Allure \u0442\u0430 CI\/CD\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u0412\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u0454\u0442\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 Git,\r\n                    \u0437\u0432\u0456\u0442\u0430\u043c\u0438 Allure \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u043c\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043c\u0438 \u0442\u0435\u0441\u0442\u0456\u0432\r\n                    \u0443 CI\/CD \u2014 \u0432\u0430\u0436\u043b\u0438\u0432\u0438\u043c\u0438 \u0441\u043a\u043b\u0430\u0434\u043e\u0432\u0438\u043c\u0438 \u0441\u0443\u0447\u0430\u0441\u043d\u043e\u0457 QA Automation.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-outcome-card\">\r\n\r\n                <div class=\"pw-outcome-icon\">\r\n                    06\r\n                <\/div>\r\n\r\n                <h3>\r\n                    \u041f\u0440\u043e\u0454\u043a\u0442 \u0434\u043b\u044f GitHub\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u0421\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0439 \u043f\u0456\u0434 \u0447\u0430\u0441 \u043a\u0443\u0440\u0441\u0443 \u043f\u0440\u043e\u0454\u043a\u0442 \u043c\u043e\u0436\u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0441\u0442\u0438\u0442\u0438\r\n                    \u043d\u0430 GitHub \u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u044f\u043a \u043f\u0440\u0438\u043a\u043b\u0430\u0434\r\n                    \u0441\u0432\u043e\u0454\u0457 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u0457 \u0440\u043e\u0431\u043e\u0442\u0438 \u043f\u0456\u0434 \u0447\u0430\u0441 \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438\r\n                    \u0434\u043e \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0438 Automation QA.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- FINAL -->\r\n\r\n        <div class=\"pw-outcome-final\">\r\n\r\n            <div>\r\n\r\n                <div class=\"pw-outcome-final-label\">\r\n                    \u041f\u0456\u0441\u043b\u044f 2 \u043c\u0456\u0441\u044f\u0446\u0456\u0432 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                <\/div>\r\n\r\n                <h3>\r\n                    \u0412\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432 \u2014\r\n                    \u0432\u0456\u0434 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0434\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0443 \u0432 CI\/CD\r\n                <\/h3>\r\n\r\n                <p>\r\n                    \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u0438 \u043e\u043a\u0440\u0435\u043c\u0456 Playwright-\u0442\u0435\u0441\u0442\u0438,\r\n                    \u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457,\r\n                    \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e, \u0430\u043d\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438 \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0442\u0435\u0441\u0442\u0456\u0432\r\n                    \u0442\u0430 \u0440\u043e\u0437\u0432\u0438\u0432\u0430\u0442\u0438 automation framework \u0443 \u043c\u0456\u0440\u0443 \u0440\u043e\u0437\u0432\u0438\u0442\u043a\u0443 \u043f\u0440\u043e\u0454\u043a\u0442\u0443.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pw-outcome-final-code\">\r\n                &lt;\/QA&gt;\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- STACK -->\r\n\r\n        <div class=\"pw-outcome-stack\">\r\n\r\n            <span>TypeScript<\/span>\r\n            <span>Playwright<\/span>\r\n            <span>UI Testing<\/span>\r\n            <span>API Testing<\/span>\r\n            <span>Page Object Model<\/span>\r\n            <span>Fixtures<\/span>\r\n            <span>Git<\/span>\r\n            <span>Allure<\/span>\r\n            <span>CI\/CD<\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-89b5abf elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"89b5abf\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-86df1b4\" data-id=\"86df1b4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fb64fb5 elementor-widget elementor-widget-html\" data-id=\"fb64fb5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section\r\n    id=\"pw-pricing-ua-inline\"\r\n    style=\"        position:relative;        width:100%;        max-width:100%;        overflow:hidden;        padding:90px 20px;        box-sizing:border-box;        color:#fff;        font-family:inherit;        background:            radial-gradient(circle at 12% 12%,rgba(34,197,94,.14),transparent 26%),            radial-gradient(circle at 88% 85%,rgba(74,222,128,.07),transparent 28%),            linear-gradient(180deg,#06110b 0%,#08150e 100%);    \"\r\n>\r\n\r\n    <div\r\n        style=\"            width:100%;            max-width:1140px;            margin:0 auto;            box-sizing:border-box;        \"\r\n    >\r\n\r\n        <!-- HEADER -->\r\n\r\n        <div\r\n            style=\"                width:100%;                max-width:860px;                margin:0 auto 34px;                text-align:center;            \"\r\n        >\r\n\r\n            <div\r\n                style=\"                    display:inline-flex;                    align-items:center;                    gap:8px;                    margin-bottom:18px;                    padding:8px 14px;                    border:1px solid rgba(74,222,128,.22);                    border-radius:100px;                    background:rgba(34,197,94,.08);                    color:#4ade80;                    font-size:11px;                    font-weight:800;                    letter-spacing:.8px;                    text-transform:uppercase;                \"\r\n            >\r\n                <span\r\n                    style=\"                        display:block;                        width:6px;                        height:6px;                        flex:0 0 6px;                        border-radius:50%;                        background:#4ade80;                        box-shadow:0 0 10px rgba(74,222,128,.7);                    \"\r\n                ><\/span>\r\n\r\n                \u0412\u0430\u0440\u0442\u0456\u0441\u0442\u044c \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n            <\/div>\r\n\r\n            <h2\r\n                style=\"                    margin:0 0 20px;                    padding:0;                    color:#fff;                    font-size:clamp(34px,7vw,58px);                    line-height:1.08;                    font-weight:850;                    letter-spacing:-1.5px;                    overflow-wrap:anywhere;                \"\r\n            >\r\n                \u041e\u0431\u0435\u0440\u0456\u0442\u044c \u0441\u0432\u0456\u0439\r\n\r\n                <span\r\n                    style=\"                        display:block;                        color:#4ade80;                    \"\r\n                >\r\n                    \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                <\/span>\r\n            <\/h2>\r\n\r\n            <p\r\n                style=\"                    max-width:760px;                    margin:0 auto;                    color:#9daca2;                    font-size:17px;                    line-height:1.7;                    overflow-wrap:anywhere;                \"\r\n            >\r\n                \u041a\u0443\u0440\u0441 \u0442\u0440\u0438\u0432\u0430\u0454\r\n                <strong style=\"color:#fff;\">2 \u043c\u0456\u0441\u044f\u0446\u0456<\/strong>.\r\n                \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u0438 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432 \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u0456\u0439 \u0433\u0440\u0443\u043f\u0456\r\n                \u0430\u0431\u043e \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0456 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- SWITCH -->\r\n\r\n        <div\r\n            style=\"                display:flex;                justify-content:center;                width:100%;                margin-bottom:30px;            \"\r\n        >\r\n\r\n            <div\r\n                style=\"                    display:flex;                    width:min(100%,360px);                    gap:5px;                    padding:5px;                    border:1px solid rgba(255,255,255,.08);                    border-radius:100px;                    background:rgba(255,255,255,.035);                    box-sizing:border-box;                \"\r\n            >\r\n\r\n                <button\r\n                    id=\"pwUaMonthBtn\"\r\n                    type=\"button\"\r\n                    style=\"                        flex:1 1 50%;                        border:0;                        outline:0;                        padding:11px 10px;                        border-radius:100px;                        background:#22c55e;                        color:#051008;                        font-family:inherit;                        font-size:11px;                        font-weight:800;                        cursor:pointer;                        white-space:nowrap;                    \"\r\n                >\r\n                    \u0417\u0430 \u043c\u0456\u0441\u044f\u0446\u044c\r\n                <\/button>\r\n\r\n                <button\r\n                    id=\"pwUaCourseBtn\"\r\n                    type=\"button\"\r\n                    style=\"                        flex:1 1 50%;                        border:0;                        outline:0;                        padding:11px 10px;                        border-radius:100px;                        background:transparent;                        color:#89988f;                        font-family:inherit;                        font-size:11px;                        font-weight:800;                        cursor:pointer;                        white-space:nowrap;                    \"\r\n                >\r\n                    \u0417\u0430 \u0432\u0435\u0441\u044c \u043a\u0443\u0440\u0441\r\n                <\/button>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CARDS -->\r\n\r\n        <div\r\n            style=\"                display:grid;                grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));                gap:18px;                width:100%;            \"\r\n        >\r\n\r\n            <!-- GROUP -->\r\n\r\n            <div\r\n                style=\"                    position:relative;                    display:flex;                    flex-direction:column;                    width:100%;                    min-width:0;                    padding:30px;                    box-sizing:border-box;                    overflow:hidden;                    border:1px solid rgba(255,255,255,.08);                    border-radius:20px;                    background:                        linear-gradient(                            180deg,                            rgba(255,255,255,.04),                            rgba(255,255,255,.018)                        );                    box-shadow:0 20px 55px rgba(0,0,0,.16);                \"\r\n            >\r\n\r\n                <div style=\"margin-bottom:24px;\">\r\n\r\n                    <div\r\n                        style=\"                            margin-bottom:6px;                            color:#fff;                            font-size:19px;                            font-weight:800;                            line-height:1.25;                            overflow-wrap:anywhere;                        \"\r\n                    >\r\n                        \u041d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432 \u0433\u0440\u0443\u043f\u0456\r\n                    <\/div>\r\n\r\n                    <div\r\n                        style=\"                            color:#829188;                            font-size:12px;                            line-height:1.5;                        \"\r\n                    >\r\n                        \u0414\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432 \u0443 \u0433\u0440\u0443\u043f\u0456\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div\r\n                    style=\"                        color:#fff;                        font-size:17px;                        font-weight:700;                        line-height:1.1;                        overflow-wrap:anywhere;                    \"\r\n                >\r\n\r\n                    <span\r\n                        id=\"pwUaGroupPrice\"\r\n                        style=\"                            display:inline-block;                            color:#fff;                            font-size:clamp(40px,10vw,56px);                            font-weight:850;                            line-height:1;                            letter-spacing:-1.8px;                        \"\r\n                    >\r\n                        5 000\r\n                    <\/span>\r\n\r\n                    \u0433\u0440\u043d\r\n\r\n                <\/div>\r\n\r\n                <div\r\n                    id=\"pwUaGroupPeriod\"\r\n                    style=\"                        margin-top:8px;                        color:#75857b;                        font-size:11px;                        line-height:1.5;                    \"\r\n                >\r\n                    \u0437\u0430 1 \u043c\u0456\u0441\u044f\u0446\u044c \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                <\/div>\r\n\r\n                <div\r\n                    style=\"                        margin:20px 0 22px;                        padding:12px 13px;                        border:1px solid rgba(255,255,255,.06);                        border-radius:11px;                        background:rgba(255,255,255,.025);                        color:#89988f;                        font-size:11px;                    \"\r\n                >\r\n                    \u0422\u0440\u0438\u0432\u0430\u043b\u0456\u0441\u0442\u044c:\r\n                    <strong style=\"color:#fff;\">\r\n                        2 \u043c\u0456\u0441\u044f\u0446\u0456\r\n                    <\/strong>\r\n                <\/div>\r\n\r\n                <div style=\"margin-bottom:26px;\">\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u0416\u0438\u0432\u0456 \u043e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            2 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u043d\u0430 \u0442\u0438\u0436\u0434\u0435\u043d\u044c\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u041d\u0435\u0432\u0435\u043b\u0438\u043a\u0430 \u0433\u0440\u0443\u043f\u0430 \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u0456\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            TypeScript + Playwright\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            UI \u0442\u0430 API Automation\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            Page Object Model \u0442\u0430 Fixtures\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            Git, Allure \u0442\u0430 CI\/CD\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u0414\u043e\u043c\u0430\u0448\u043d\u0456 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f \u0442\u0430 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0430 \u043a\u043e\u0434\u0443\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0442\u044f\u0433\u043e\u043c \u043a\u0443\u0440\u0441\u0443\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <a\r\n                    href=\"#register\"\r\n                    style=\"                        display:flex;                        align-items:center;                        justify-content:center;                        width:100%;                        min-height:52px;                        margin-top:auto;                        padding:14px 16px;                        box-sizing:border-box;                        border:1px solid rgba(74,222,128,.25);                        border-radius:12px;                        background:rgba(34,197,94,.08);                        color:#4ade80;                        font-size:12px;                        font-weight:800;                        line-height:1.35;                        text-align:center;                        text-decoration:none;                        overflow-wrap:anywhere;                    \"\r\n                >\r\n                    \u0417\u0430\u043f\u0438\u0441\u0430\u0442\u0438\u0441\u044f \u0432 \u0433\u0440\u0443\u043f\u0443\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- INDIVIDUAL -->\r\n\r\n            <div\r\n                style=\"                    position:relative;                    display:flex;                    flex-direction:column;                    width:100%;                    min-width:0;                    padding:30px;                    box-sizing:border-box;                    overflow:hidden;                    border:1px solid rgba(74,222,128,.28);                    border-radius:20px;                    background:                        radial-gradient(                            circle at 100% 0%,                            rgba(74,222,128,.11),                            transparent 33%                        ),                        linear-gradient(                            180deg,                            rgba(34,197,94,.055),                            rgba(255,255,255,.02)                        );                    box-shadow:0 24px 65px rgba(0,0,0,.18);                \"\r\n            >\r\n\r\n                <div\r\n                    style=\"                        display:flex;                        flex-wrap:wrap;                        justify-content:space-between;                        align-items:flex-start;                        gap:12px;                        margin-bottom:24px;                    \"\r\n                >\r\n\r\n                    <div style=\"min-width:0;flex:1 1 220px;\">\r\n\r\n                        <div\r\n                            style=\"                                margin-bottom:6px;                                color:#fff;                                font-size:19px;                                font-weight:800;                                line-height:1.25;                                overflow-wrap:anywhere;                            \"\r\n                        >\r\n                            \u0406\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0435 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                        <\/div>\r\n\r\n                        <div\r\n                            style=\"                                color:#829188;                                font-size:12px;                                line-height:1.5;                            \"\r\n                        >\r\n                            \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0456 \u0437\u0430\u043d\u044f\u0442\u0442\u044f 1 \u043d\u0430 1\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                    <div\r\n                        style=\"                            flex:0 0 auto;                            padding:7px 10px;                            border:1px solid rgba(74,222,128,.20);                            border-radius:100px;                            background:rgba(34,197,94,.10);                            color:#4ade80;                            font-size:9px;                            font-weight:900;                            letter-spacing:.5px;                            text-transform:uppercase;                        \"\r\n                    >\r\n                        \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0438\u0439\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div\r\n                    style=\"                        color:#fff;                        font-size:17px;                        font-weight:700;                        line-height:1.1;                        overflow-wrap:anywhere;                    \"\r\n                >\r\n\r\n                    <span\r\n                        id=\"pwUaIndividualPrice\"\r\n                        style=\"                            display:inline-block;                            color:#fff;                            font-size:clamp(40px,10vw,56px);                            font-weight:850;                            line-height:1;                            letter-spacing:-1.8px;                        \"\r\n                    >\r\n                        6 000\r\n                    <\/span>\r\n\r\n                    \u0433\u0440\u043d\r\n\r\n                <\/div>\r\n\r\n                <div\r\n                    id=\"pwUaIndividualPeriod\"\r\n                    style=\"                        margin-top:8px;                        color:#75857b;                        font-size:11px;                        line-height:1.5;                    \"\r\n                >\r\n                    \u0437\u0430 1 \u043c\u0456\u0441\u044f\u0446\u044c \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                <\/div>\r\n\r\n                <div\r\n                    style=\"                        margin:20px 0 22px;                        padding:12px 13px;                        border:1px solid rgba(255,255,255,.06);                        border-radius:11px;                        background:rgba(255,255,255,.025);                        color:#89988f;                        font-size:11px;                    \"\r\n                >\r\n                    \u0422\u0440\u0438\u0432\u0430\u043b\u0456\u0441\u0442\u044c:\r\n                    <strong style=\"color:#fff;\">\r\n                        2 \u043c\u0456\u0441\u044f\u0446\u0456\r\n                    <\/strong>\r\n                <\/div>\r\n\r\n                <div style=\"margin-bottom:26px;\">\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u0406\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0456 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            2 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u043d\u0430 \u0442\u0438\u0436\u0434\u0435\u043d\u044c\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0438\u0439 \u0442\u0435\u043c\u043f \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u0456\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            TypeScript + Playwright\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            UI \u0442\u0430 API Automation\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            Page Object Model \u0442\u0430 Fixtures\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            Git, Allure \u0442\u0430 CI\/CD\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;margin-bottom:12px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0438\u0439 \u0440\u043e\u0437\u0431\u0456\u0440 \u0432\u0430\u0448\u043e\u0433\u043e \u043a\u043e\u0434\u0443\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div style=\"display:flex;gap:10px;\">\r\n                        <span style=\"color:#4ade80;font-weight:900;\">\u2713<\/span>\r\n                        <span style=\"color:#a9b7ae;font-size:13px;line-height:1.55;\">\r\n                            \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u043f\u0440\u043e\u0442\u044f\u0433\u043e\u043c \u043a\u0443\u0440\u0441\u0443\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <a\r\n                    href=\"#register\"\r\n                    style=\"                        display:flex;                        align-items:center;                        justify-content:center;                        width:100%;                        min-height:52px;                        margin-top:auto;                        padding:14px 16px;                        box-sizing:border-box;                        border:1px solid #22c55e;                        border-radius:12px;                        background:#22c55e;                        color:#051008;                        font-size:12px;                        font-weight:800;                        line-height:1.35;                        text-align:center;                        text-decoration:none;                        overflow-wrap:anywhere;                    \"\r\n                >\r\n                    \u041e\u0431\u0440\u0430\u0442\u0438 \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0435 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- INFO -->\r\n\r\n        <div\r\n            style=\"                display:grid;                grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));                gap:10px;                width:100%;                margin-top:20px;            \"\r\n        >\r\n\r\n            <div\r\n                style=\"                    padding:17px 10px;                    border:1px solid rgba(255,255,255,.06);                    border-radius:13px;                    background:rgba(255,255,255,.022);                    text-align:center;                \"\r\n            >\r\n                <strong\r\n                    style=\"                        display:block;                        margin-bottom:4px;                        color:#f0f8f2;                        font-size:13px;                    \"\r\n                >\r\n                    2 \u043c\u0456\u0441\u044f\u0446\u0456\r\n                <\/strong>\r\n\r\n                <span style=\"color:#718078;font-size:9px;\">\r\n                    \u0422\u0440\u0438\u0432\u0430\u043b\u0456\u0441\u0442\u044c \u043a\u0443\u0440\u0441\u0443\r\n                <\/span>\r\n            <\/div>\r\n\r\n            <div\r\n                style=\"                    padding:17px 10px;                    border:1px solid rgba(255,255,255,.06);                    border-radius:13px;                    background:rgba(255,255,255,.022);                    text-align:center;                \"\r\n            >\r\n                <strong\r\n                    style=\"                        display:block;                        margin-bottom:4px;                        color:#f0f8f2;                        font-size:13px;                    \"\r\n                >\r\n                    2\u00d7 \u043d\u0430 \u0442\u0438\u0436\u0434\u0435\u043d\u044c\r\n                <\/strong>\r\n\r\n                <span style=\"color:#718078;font-size:9px;\">\r\n                    \u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0456 \u0437\u0430\u043d\u044f\u0442\u0442\u044f\r\n                <\/span>\r\n            <\/div>\r\n\r\n            <div\r\n                style=\"                    padding:17px 10px;                    border:1px solid rgba(255,255,255,.06);                    border-radius:13px;                    background:rgba(255,255,255,.022);                    text-align:center;                \"\r\n            >\r\n                <strong\r\n                    style=\"                        display:block;                        margin-bottom:4px;                        color:#f0f8f2;                        font-size:13px;                    \"\r\n                >\r\n                    Microsoft Teams\r\n                <\/strong>\r\n\r\n                <span style=\"color:#718078;font-size:9px;\">\r\n                    \u0416\u0438\u0432\u0435 \u043e\u043d\u043b\u0430\u0439\u043d-\u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                <\/span>\r\n            <\/div>\r\n\r\n            <div\r\n                style=\"                    padding:17px 10px;                    border:1px solid rgba(255,255,255,.06);                    border-radius:13px;                    background:rgba(255,255,255,.022);                    text-align:center;                \"\r\n            >\r\n                <strong\r\n                    style=\"                        display:block;                        margin-bottom:4px;                        color:#f0f8f2;                        font-size:13px;                    \"\r\n                >\r\n                    \u0421\u0435\u0440\u0442\u0438\u0444\u0456\u043a\u0430\u0442\r\n                <\/strong>\r\n\r\n                <span style=\"color:#718078;font-size:9px;\">\r\n                    \u041f\u0456\u0441\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044f \u043a\u0443\u0440\u0441\u0443\r\n                <\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    const monthBtn = document.getElementById('pwUaMonthBtn');\r\n    const courseBtn = document.getElementById('pwUaCourseBtn');\r\n\r\n    const groupPrice = document.getElementById('pwUaGroupPrice');\r\n    const individualPrice = document.getElementById('pwUaIndividualPrice');\r\n\r\n    const groupPeriod = document.getElementById('pwUaGroupPeriod');\r\n    const individualPeriod = document.getElementById('pwUaIndividualPeriod');\r\n\r\n    if (\r\n        !monthBtn ||\r\n        !courseBtn ||\r\n        !groupPrice ||\r\n        !individualPrice ||\r\n        !groupPeriod ||\r\n        !individualPeriod\r\n    ) {\r\n        return;\r\n    }\r\n\r\n    function showMonth() {\r\n\r\n        groupPrice.textContent = '5 000';\r\n        individualPrice.textContent = '6 000';\r\n\r\n        groupPeriod.textContent = '\u0437\u0430 1 \u043c\u0456\u0441\u044f\u0446\u044c \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f';\r\n        individualPeriod.textContent = '\u0437\u0430 1 \u043c\u0456\u0441\u044f\u0446\u044c \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f';\r\n\r\n        monthBtn.style.background = '#22c55e';\r\n        monthBtn.style.color = '#051008';\r\n\r\n        courseBtn.style.background = 'transparent';\r\n        courseBtn.style.color = '#89988f';\r\n    }\r\n\r\n    function showCourse() {\r\n\r\n        groupPrice.textContent = '10 000';\r\n        individualPrice.textContent = '12 000';\r\n\r\n        groupPeriod.textContent = '\u0437\u0430 \u043f\u043e\u0432\u043d\u0438\u0439 \u043a\u0443\u0440\u0441 \u2014 2 \u043c\u0456\u0441\u044f\u0446\u0456';\r\n        individualPeriod.textContent = '\u0437\u0430 \u043f\u043e\u0432\u043d\u0438\u0439 \u043a\u0443\u0440\u0441 \u2014 2 \u043c\u0456\u0441\u044f\u0446\u0456';\r\n\r\n        courseBtn.style.background = '#22c55e';\r\n        courseBtn.style.color = '#051008';\r\n\r\n        monthBtn.style.background = 'transparent';\r\n        monthBtn.style.color = '#89988f';\r\n    }\r\n\r\n    monthBtn.addEventListener('click', showMonth);\r\n    courseBtn.addEventListener('click', showCourse);\r\n\r\n})();\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-64f6e6c elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"64f6e6c\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9e3be7c\" data-id=\"9e3be7c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ce2045a elementor-widget elementor-widget-html\" data-id=\"ce2045a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* =========================\r\n   PLAYWRIGHT FAQ\r\n========================= *\/\r\n\r\n.pw-faq2 {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    padding: 110px 20px;\r\n    font-family: inherit;\r\n    color: #102117;\r\n    background:\r\n        radial-gradient(circle at 10% 15%, rgba(34,197,94,.08), transparent 24%),\r\n        radial-gradient(circle at 90% 85%, rgba(74,222,128,.06), transparent 26%),\r\n        linear-gradient(180deg,#ffffff 0%,#f6fbf7 100%);\r\n}\r\n\r\n.pw-faq2,\r\n.pw-faq2 * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-faq2 * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-faq2::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    background:\r\n        linear-gradient(rgba(34,197,94,.025) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(34,197,94,.025) 1px, transparent 1px);\r\n    background-size: 72px 72px;\r\n}\r\n\r\n.pw-faq2-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1140px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.pw-faq2-grid {\r\n    display: grid;\r\n    grid-template-columns: .85fr 1.15fr;\r\n    gap: 50px;\r\n    align-items: start;\r\n}\r\n\r\n\r\n\/* LEFT *\/\r\n\r\n.pw-faq2-left {\r\n    position: sticky;\r\n    top: 30px;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-faq2-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 18px;\r\n    padding: 8px 14px;\r\n    border: 1px solid rgba(22,163,74,.16);\r\n    border-radius: 100px;\r\n    background: rgba(34,197,94,.07);\r\n    color: #15803d;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: .8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-faq2-badge::before {\r\n    content: \"\";\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #22c55e;\r\n    box-shadow: 0 0 10px rgba(34,197,94,.5);\r\n}\r\n\r\n.pw-faq2 h2 {\r\n    margin: 0 0 20px !important;\r\n    padding: 0 !important;\r\n    color: #102117 !important;\r\n    font-size: clamp(38px,5vw,58px) !important;\r\n    line-height: 1.07 !important;\r\n    font-weight: 850 !important;\r\n    letter-spacing: -1.7px;\r\n}\r\n\r\n.pw-faq2 h2 span {\r\n    display: block;\r\n    color: #16a34a !important;\r\n}\r\n\r\n.pw-faq2-intro {\r\n    max-width: 520px;\r\n    margin: 0 0 30px !important;\r\n    color: #617066 !important;\r\n    font-size: 17px !important;\r\n    line-height: 1.75 !important;\r\n}\r\n\r\n.pw-faq2-intro strong {\r\n    color: #203b28 !important;\r\n}\r\n\r\n\r\n\/* INFO *\/\r\n\r\n.pw-faq2-info {\r\n    display: grid;\r\n    grid-template-columns: repeat(2,minmax(0,1fr));\r\n    gap: 10px;\r\n}\r\n\r\n.pw-faq2-info-item {\r\n    min-width: 0;\r\n    padding: 18px;\r\n    border: 1px solid rgba(22,163,74,.10);\r\n    border-radius: 14px;\r\n    background: rgba(255,255,255,.78);\r\n    box-shadow: 0 8px 28px rgba(24,70,39,.035);\r\n}\r\n\r\n.pw-faq2-info-item strong {\r\n    display: block;\r\n    margin-bottom: 4px;\r\n    color: #17331f !important;\r\n    font-size: 15px;\r\n    line-height: 1.35;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-faq2-info-item span {\r\n    display: block;\r\n    color: #7a887f;\r\n    font-size: 10px;\r\n    line-height: 1.45;\r\n}\r\n\r\n\r\n\/* FAQ LIST *\/\r\n\r\n.pw-faq2-list {\r\n    min-width: 0;\r\n}\r\n\r\n.pw-faq2-item {\r\n    width: 100%;\r\n    min-width: 0;\r\n    margin-bottom: 10px;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(22,163,74,.09);\r\n    border-radius: 15px;\r\n    background: rgba(255,255,255,.92);\r\n    box-shadow: 0 8px 30px rgba(24,70,39,.035);\r\n    transition: .2s ease;\r\n}\r\n\r\n.pw-faq2-item:hover {\r\n    border-color: rgba(22,163,74,.20);\r\n}\r\n\r\n.pw-faq2-item[open] {\r\n    border-color: rgba(22,163,74,.20);\r\n    box-shadow: 0 12px 34px rgba(24,70,39,.055);\r\n}\r\n\r\n.pw-faq2-question {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    min-height: 66px;\r\n    padding: 19px 58px 19px 20px;\r\n    cursor: pointer;\r\n    color: #17331f;\r\n    font-size: 14px;\r\n    line-height: 1.5;\r\n    font-weight: 750;\r\n    list-style: none;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-faq2-question::-webkit-details-marker {\r\n    display: none;\r\n}\r\n\r\n.pw-faq2-question::after {\r\n    content: \"+\";\r\n    position: absolute;\r\n    right: 18px;\r\n    top: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 28px;\r\n    height: 28px;\r\n    transform: translateY(-50%);\r\n    border-radius: 8px;\r\n    background: rgba(34,197,94,.08);\r\n    color: #16a34a;\r\n    font-size: 20px;\r\n    font-weight: 500;\r\n    transition: .2s ease;\r\n}\r\n\r\n.pw-faq2-item[open] .pw-faq2-question::after {\r\n    transform: translateY(-50%) rotate(45deg);\r\n    background: #16a34a;\r\n    color: #fff;\r\n}\r\n\r\n.pw-faq2-answer {\r\n    padding: 0 20px 20px;\r\n}\r\n\r\n.pw-faq2-answer p {\r\n    margin: 0 !important;\r\n    color: #68766d !important;\r\n    font-size: 13px !important;\r\n    line-height: 1.75 !important;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n.pw-faq2-answer strong {\r\n    color: #1f4429 !important;\r\n}\r\n\r\n\r\n\/* CTA *\/\r\n\r\n.pw-faq2-cta {\r\n    margin-top: 18px;\r\n    padding: 28px;\r\n    border: 1px solid rgba(22,163,74,.12);\r\n    border-radius: 18px;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(34,197,94,.08),\r\n            rgba(255,255,255,.9)\r\n        );\r\n}\r\n\r\n.pw-faq2-cta strong {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    color: #15331d !important;\r\n    font-size: 20px;\r\n    line-height: 1.35;\r\n}\r\n\r\n.pw-faq2-cta p {\r\n    margin: 0 0 18px !important;\r\n    color: #68766d !important;\r\n    font-size: 13px !important;\r\n    line-height: 1.65 !important;\r\n}\r\n\r\n.pw-faq2-button {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 46px;\r\n    padding: 12px 20px;\r\n    border-radius: 11px;\r\n    background: #16a34a;\r\n    color: #fff !important;\r\n    text-decoration: none !important;\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    transition: .2s ease;\r\n}\r\n\r\n.pw-faq2-button:hover {\r\n    transform: translateY(-2px);\r\n    background: #15803d;\r\n    color: #fff !important;\r\n}\r\n\r\n\r\n\/* TABLET *\/\r\n\r\n@media(max-width:900px) {\r\n\r\n    .pw-faq2-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 38px;\r\n    }\r\n\r\n    .pw-faq2-left {\r\n        position: static;\r\n    }\r\n\r\n    .pw-faq2-intro {\r\n        max-width: 760px;\r\n    }\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:700px) {\r\n\r\n    .pw-faq2 {\r\n        padding: 70px 16px;\r\n    }\r\n\r\n    .pw-faq2 h2 {\r\n        font-size: clamp(31px,9vw,39px) !important;\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .pw-faq2-intro {\r\n        font-size: 16px !important;\r\n        line-height: 1.65 !important;\r\n    }\r\n\r\n    .pw-faq2-question {\r\n        min-height: 62px;\r\n        padding: 17px 52px 17px 17px;\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pw-faq2-answer {\r\n        padding: 0 17px 18px;\r\n    }\r\n\r\n    .pw-faq2-question::after {\r\n        right: 15px;\r\n        width: 26px;\r\n        height: 26px;\r\n    }\r\n\r\n    .pw-faq2-cta {\r\n        padding: 22px 18px;\r\n    }\r\n\r\n    .pw-faq2-button {\r\n        width: 100%;\r\n    }\r\n}\r\n\r\n@media(max-width:390px) {\r\n\r\n    .pw-faq2 {\r\n        padding: 58px 12px;\r\n    }\r\n\r\n    .pw-faq2 h2 {\r\n        font-size: 30px !important;\r\n    }\r\n\r\n    .pw-faq2-info {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"pw-faq2\">\r\n\r\n    <div class=\"pw-faq2-container\">\r\n\r\n        <div class=\"pw-faq2-grid\">\r\n\r\n\r\n            <!-- LEFT -->\r\n\r\n            <div class=\"pw-faq2-left\">\r\n\r\n                <div class=\"pw-faq2-badge\">\r\n                    FAQ\r\n                <\/div>\r\n\r\n                <h2>\r\n                    \u0427\u0430\u0441\u0442\u0456 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f \u043f\u0440\u043e \u043a\u0443\u0440\u0441\r\n                    <span>Playwright + TypeScript<\/span>\r\n                <\/h2>\r\n\r\n                <p class=\"pw-faq2-intro\">\r\n                    \u0417\u0456\u0431\u0440\u0430\u043b\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0456 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0456 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f \u043f\u0440\u043e\r\n                    <strong>\u043a\u0443\u0440\u0441 Playwright + TypeScript<\/strong>,\r\n                    \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443, \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f, \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442,\r\n                    \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0442\u0430 \u043f\u0435\u0440\u0435\u0445\u0456\u0434 \u0432 Automation QA.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"pw-faq2-info\">\r\n\r\n                    <div class=\"pw-faq2-info-item\">\r\n                        <strong>2 \u043c\u0456\u0441\u044f\u0446\u0456<\/strong>\r\n                        <span>\u0442\u0440\u0438\u0432\u0430\u043b\u0456\u0441\u0442\u044c \u043a\u0443\u0440\u0441\u0443<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-faq2-info-item\">\r\n                        <strong>2\u00d7 \u043d\u0430 \u0442\u0438\u0436\u0434\u0435\u043d\u044c<\/strong>\r\n                        <span>\u0436\u0438\u0432\u0456 \u0437\u0430\u043d\u044f\u0442\u0442\u044f<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-faq2-info-item\">\r\n                        <strong>\u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432<\/strong>\r\n                        <span>\u0443 \u0433\u0440\u0443\u043f\u0456<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-faq2-info-item\">\r\n                        <strong>Real Project<\/strong>\r\n                        <span>\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043f\u0456\u0434 \u0447\u0430\u0441 \u043a\u0443\u0440\u0441\u0443<\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- RIGHT -->\r\n\r\n            <div class=\"pw-faq2-list\">\r\n\r\n\r\n                <!-- 1 -->\r\n\r\n                <details class=\"pw-faq2-item\" open>\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0437\u043d\u0430\u0442\u0438 TypeScript \u0434\u043e \u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u041d\u0456. \u041c\u0438 \u0440\u043e\u0437\u0431\u0435\u0440\u0435\u043c\u043e \u043e\u0441\u043d\u043e\u0432\u0438 TypeScript,\r\n                            \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0456 \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 Playwright:\r\n                            \u0442\u0438\u043f\u0438 \u0434\u0430\u043d\u0438\u0445, \u0444\u0443\u043d\u043a\u0446\u0456\u0457, \u043c\u0430\u0441\u0438\u0432\u0438, \u043e\u0431'\u0454\u043a\u0442\u0438,\r\n                            \u043a\u043b\u0430\u0441\u0438 \u0442\u0430 async\/await.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 2 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u043f\u0456\u0434\u0456\u0439\u0434\u0435 \u043a\u0443\u0440\u0441 Manual QA Engineer, \u044f\u043a\u0438\u0439 \u0445\u043e\u0447\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 Automation?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u041a\u0443\u0440\u0441 \u043f\u0456\u0434\u0445\u043e\u0434\u0438\u0442\u044c Manual QA Engineer, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u043f\u0435\u0440\u0435\u0439\u0442\u0438\r\n                            \u0432 <strong>Automation QA<\/strong>, \u0432\u0438\u0432\u0447\u0438\u0442\u0438 TypeScript\r\n                            \u0456 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 UI- \u0442\u0430 API-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e Playwright.\r\n                            \u041d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043f\u043e\u0447\u0438\u043d\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0438\u0445 \u043e\u0441\u043d\u043e\u0432 \u0456 \u043f\u043e\u0441\u0442\u0443\u043f\u043e\u0432\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c\r\n                            \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 3 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u0431\u0443\u0434\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0454\u043a\u0442\u0456 \u0437 Playwright?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u041f\u0456\u0434 \u0447\u0430\u0441 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437\r\n                            <strong>\u0440\u0435\u0430\u043b\u044c\u043d\u0438\u043c \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u043e\u043c<\/strong> \u0456 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0434\u043b\u044f \u043d\u044c\u043e\u0433\u043e\r\n                            \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0430 Playwright + TypeScript:\r\n                            UI-\u0442\u0435\u0441\u0442\u0438, API-\u0442\u0435\u0441\u0442\u0438, Page Object Model, Fixtures,\r\n                            \u0437\u0432\u0456\u0442\u043d\u0456\u0441\u0442\u044c Allure \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u0456\u0432 \u0443 CI\/CD.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 4 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0429\u043e \u0441\u0430\u043c\u0435 \u043c\u0438 \u0431\u0443\u0434\u0435\u043c\u043e \u0432\u0438\u0432\u0447\u0430\u0442\u0438 \u0432 Playwright?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0412\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Playwright Test,\r\n                            \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438, assertions, Auto-waiting,\r\n                            \u0444\u043e\u0440\u043c\u0430\u043c\u0438, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0456\u0454\u044e, Page Object Model,\r\n                            Fixtures, Hooks \u0456 \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u0454\u044e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0454\u043a\u0442\u0443.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 5 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u0431\u0443\u0434\u0435 API Testing?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u0432\u0438\u043a\u043e\u043d\u0443\u0432\u0430\u0442\u0438 GET, POST,\r\n                            PUT \u0456 DELETE \u0437\u0430\u043f\u0438\u0442\u0438, \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0442\u0438 status code\r\n                            \u0442\u0430 response body, \u0430 \u0442\u0430\u043a\u043e\u0436 \u043f\u043e\u0454\u0434\u043d\u0443\u0432\u0430\u0442\u0438\r\n                            API \u0442\u0430 UI Automation.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 6 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u0431\u0443\u0434\u0435\u043c\u043e \u043c\u0438 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 Page Object Model?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u0431\u0443\u0434\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443\r\n                            automation-\u043f\u0440\u043e\u0454\u043a\u0442\u0443, \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 Page Objects,\r\n                            BasePage, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u043d\u0456 \u043c\u0435\u0442\u043e\u0434\u0438\r\n                            \u0442\u0430 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 7 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u0431\u0443\u0434\u0443\u0442\u044c Git, Allure \u0442\u0430 CI\/CD?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u0412\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Git \u0456 GitHub,\r\n                            \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 Allure-\u0437\u0432\u0456\u0442\u0438 \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\r\n                            \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Playwright-\u0442\u0435\u0441\u0442\u0456\u0432\r\n                            \u0447\u0435\u0440\u0435\u0437 CI\/CD.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 8 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u042f\u043a \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442\u044c \u0437\u0430\u043d\u044f\u0442\u0442\u044f?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0417\u0430\u043d\u044f\u0442\u0442\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442\u044c \u043e\u043d\u043b\u0430\u0439\u043d \u0443\r\n                            <strong>Microsoft Teams<\/strong>.\r\n                            \u0426\u0435 \u0436\u0438\u0432\u0435 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c,\r\n                            \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u044e, \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u043e\u044e \u043a\u043e\u0434\u0443 \u0442\u0430 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044f\u043c\u0438\r\n                            \u043d\u0430 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 9 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0421\u043a\u0456\u043b\u044c\u043a\u0438 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432 \u043d\u0430\u0432\u0447\u0430\u0454\u0442\u044c\u0441\u044f \u0443 \u0433\u0440\u0443\u043f\u0456?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0423 \u0433\u0440\u0443\u043f\u0456 \u043d\u0430\u0432\u0447\u0430\u0454\u0442\u044c\u0441\u044f \u0434\u043e\r\n                            <strong>5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432<\/strong>.\r\n                            \u0417\u0430\u0432\u0434\u044f\u043a\u0438 \u0446\u044c\u043e\u043c\u0443 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447 \u043c\u043e\u0436\u0435 \u043f\u0440\u0438\u0434\u0456\u043b\u0438\u0442\u0438\r\n                            \u0434\u043e\u0441\u0442\u0430\u0442\u043d\u044c\u043e \u0447\u0430\u0441\u0443 \u043a\u043e\u0436\u043d\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u043d\u0438\u043a\u0443,\r\n                            \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438 \u043a\u043e\u0434 \u0456 \u0440\u043e\u0437\u0456\u0431\u0440\u0430\u0442\u0438 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u0449\u043e \u0432\u0438\u043d\u0438\u043a\u0430\u044e\u0442\u044c.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 10 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u044e \u044f \u0441\u0435\u0440\u0442\u0438\u0444\u0456\u043a\u0430\u0442?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u041f\u0456\u0441\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044f \u043a\u0443\u0440\u0441\u0443 \u0432\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u0454\u0442\u0435\r\n                            \u0441\u0435\u0440\u0442\u0438\u0444\u0456\u043a\u0430\u0442 \u043f\u0440\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0436\u0435\u043d\u043d\u044f \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f\r\n                            Playwright + TypeScript.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 11 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0434\u043e\u0441\u0432\u0456\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043b\u044f \u0432\u0438\u0432\u0447\u0435\u043d\u043d\u044f Playwright?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u041d\u0456. \u041a\u0443\u0440\u0441 \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0442\u0430\u043a, \u0449\u043e\u0431 QA Engineer \u043c\u0456\u0433 \u043f\u043e\u0447\u0430\u0442\u0438\r\n                            \u0432\u0438\u0432\u0447\u0435\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0431\u0435\u0437 \u0432\u0435\u043b\u0438\u043a\u043e\u0433\u043e\r\n                            \u0434\u043e\u0441\u0432\u0456\u0434\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f. \u041f\u0435\u0440\u0435\u0434 \u0440\u043e\u0431\u043e\u0442\u043e\u044e \u0437 Playwright\r\n                            \u043c\u0438 \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0456 \u043e\u0441\u043d\u043e\u0432\u0438\r\n                            <strong>TypeScript \u0434\u043b\u044f QA Automation<\/strong>:\r\n                            \u0437\u043c\u0456\u043d\u043d\u0456, \u0442\u0438\u043f\u0438 \u0434\u0430\u043d\u0438\u0445, \u0444\u0443\u043d\u043a\u0446\u0456\u0457, \u043c\u0430\u0441\u0438\u0432\u0438,\r\n                            \u043e\u0431'\u0454\u043a\u0442\u0438, \u043a\u043b\u0430\u0441\u0438 \u0442\u0430 async\/await.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 12 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0429\u043e \u044f \u0437\u043c\u043e\u0436\u0443 \u0440\u043e\u0431\u0438\u0442\u0438 \u043f\u0456\u0441\u043b\u044f \u043a\u0443\u0440\u0441\u0443 Playwright + TypeScript?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u041f\u0456\u0441\u043b\u044f \u043a\u0443\u0440\u0441\u0443 \u0432\u0438 \u0437\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438\r\n                            <strong>UI- \u0442\u0430 API-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u043d\u0430 Playwright + TypeScript<\/strong>,\r\n                            \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0454\u043a\u0442 \u0456\u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c Page Object Model\r\n                            \u0456 Fixtures, \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438,\r\n                            \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 Allure-\u0437\u0432\u0456\u0442\u0438 \u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438\r\n                            \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 CI\/CD.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 13 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u0431\u0443\u0434\u0435 \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0434\u043e \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0438 Automation QA Engineer?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u041f\u0456\u0434 \u0447\u0430\u0441 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043c\u0438 \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0456 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f\r\n                            \u0437 <strong>Playwright, TypeScript \u0456 QA Automation<\/strong>,\r\n                            \u044f\u043a\u0456 \u043c\u043e\u0436\u0443\u0442\u044c \u0437\u0443\u0441\u0442\u0440\u0456\u0447\u0430\u0442\u0438\u0441\u044f \u043d\u0430 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0430\u0445.\r\n                            \u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043d\u0435 \u043b\u0438\u0448\u0435 \u043f\u0438\u0441\u0430\u0442\u0438 \u043a\u043e\u0434, \u0430 \u0439 \u043f\u043e\u044f\u0441\u043d\u044e\u0432\u0430\u0442\u0438\r\n                            \u0440\u043e\u0431\u043e\u0442\u0443 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0456\u0432, async\/await, Page Object Model,\r\n                            Fixtures, API Testing, Git \u0456 CI\/CD.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 14 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u0431\u0443\u0434\u0443\u0442\u044c \u0434\u043e\u043c\u0430\u0448\u043d\u0456 \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f \u0442\u0430 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0430 \u043a\u043e\u0434\u0443?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u041f\u0456\u0441\u043b\u044f \u0437\u0430\u043d\u044f\u0442\u044c \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u043d\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0456\r\n                            \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f \u0437 TypeScript, Playwright, UI Automation,\r\n                            API Testing \u0456 \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0438 automation framework.\r\n                            \u0412\u0438\u043a\u043b\u0430\u0434\u0430\u0447 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0454 \u043a\u043e\u0434, \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u0454 \u043f\u043e\u043c\u0438\u043b\u043a\u0438\r\n                            \u0442\u0430 \u0434\u0430\u0454 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0456\u0457 \u0449\u043e\u0434\u043e \u0439\u043e\u0433\u043e \u043f\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u044f.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 15 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u043c\u043e\u0436\u043d\u0430 \u043d\u0430\u0432\u0447\u0430\u0442\u0438\u0441\u044f \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u043e?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0422\u0430\u043a. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u0456 \u0434\u0432\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0438 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f:\r\n                            <strong>\u0433\u0440\u0443\u043f\u0430 \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432<\/strong> \u0442\u0430 \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0456\r\n                            \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c. \u0412 \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u0456\r\n                            \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u043d\u0430 \u043e\u0434\u0438\u043d \u0456\u0437 \u043c\u043e\u0436\u043b\u0438\u0432\u0456\u0441\u0442\u044e \u043f\u0440\u0438\u0434\u0456\u043b\u0438\u0442\u0438\r\n                            \u0431\u0456\u043b\u044c\u0448\u0435 \u0447\u0430\u0441\u0443 \u0432\u0430\u0448\u0438\u043c \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f\u043c \u0456 \u043f\u0440\u0430\u043a\u0442\u0438\u0446\u0456.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 16 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0427\u0438 \u0431\u0443\u0434\u0435 \u0432 \u043c\u0435\u043d\u0435 \u043f\u0440\u043e\u0454\u043a\u0442 \u043d\u0430 GitHub \u043f\u0456\u0441\u043b\u044f \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u041f\u0456\u0434 \u0447\u0430\u0441 \u043a\u0443\u0440\u0441\u0443 \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0454\u043a\u0442\r\n                            \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043b\u044f\r\n                            <strong>\u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u043f\u0440\u043e\u0454\u043a\u0442\u0443<\/strong>\r\n                            \u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c TypeScript \u0456 Playwright.\r\n                            \u0423 \u043f\u0440\u043e\u0454\u043a\u0442\u0456 \u0431\u0443\u0434\u0443\u0442\u044c UI- \u0442\u0430 API-\u0442\u0435\u0441\u0442\u0438,\r\n                            Page Object Model, Fixtures, \u0437\u0432\u0456\u0442\u043d\u0456\u0441\u0442\u044c \u0456 CI\/CD.\r\n                            \u041a\u043e\u0434 \u043c\u043e\u0436\u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u0443 \u0441\u0432\u043e\u0454\u043c\u0443 GitHub \u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\r\n                            \u044f\u043a \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u0457 \u0440\u043e\u0431\u043e\u0442\u0438 \u043f\u0456\u0434 \u0447\u0430\u0441 \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438\r\n                            \u0434\u043e \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434\u0438.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- 17 -->\r\n\r\n                <details class=\"pw-faq2-item\">\r\n\r\n                    <summary class=\"pw-faq2-question\">\r\n                        \u0421\u043a\u0456\u043b\u044c\u043a\u0438 \u043a\u043e\u0448\u0442\u0443\u0454 \u043a\u0443\u0440\u0441 Playwright + TypeScript?\r\n                    <\/summary>\r\n\r\n                    <div class=\"pw-faq2-answer\">\r\n                        <p>\r\n                            \u0412\u0430\u0440\u0442\u0456\u0441\u0442\u044c \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0443 \u0433\u0440\u0443\u043f\u0456 \u2014\r\n                            <strong>5 000 \u0433\u0440\u043d \u043d\u0430 \u043c\u0456\u0441\u044f\u0446\u044c<\/strong>.\r\n                            \u041f\u043e\u0432\u043d\u0438\u0439 \u043a\u0443\u0440\u0441 \u0442\u0440\u0438\u0432\u0430\u043b\u0456\u0441\u0442\u044e 2 \u043c\u0456\u0441\u044f\u0446\u0456 \u2014\r\n                            <strong>10 000 \u0433\u0440\u043d<\/strong>.\r\n                            \u0406\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0435 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043a\u043e\u0448\u0442\u0443\u0454\r\n                            <strong>6 000 \u0433\u0440\u043d \u043d\u0430 \u043c\u0456\u0441\u044f\u0446\u044c<\/strong> \u0430\u0431\u043e\r\n                            <strong>12 000 \u0433\u0440\u043d \u0437\u0430 \u043f\u043e\u0432\u043d\u0438\u0439 \u043a\u0443\u0440\u0441<\/strong>.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/details>\r\n\r\n\r\n                <!-- CTA -->\r\n\r\n                <div class=\"pw-faq2-cta\">\r\n\r\n                    <strong>\r\n                        \u041d\u0435 \u0437\u043d\u0430\u0439\u0448\u043b\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0456 \u043d\u0430 \u0441\u0432\u043e\u0454 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f?\r\n                    <\/strong>\r\n\r\n                    <p>\r\n                        \u041d\u0430\u043f\u0438\u0448\u0456\u0442\u044c \u043d\u0430\u043c \u2014 \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0438,\r\n                        \u0447\u0438 \u043f\u0456\u0434\u0456\u0439\u0434\u0435 \u0432\u0430\u043c \u043a\u0443\u0440\u0441 Playwright + TypeScript\r\n                        \u0442\u0430 \u044f\u043a\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043a\u0440\u0430\u0449\u0435 \u043e\u0431\u0440\u0430\u0442\u0438.\r\n                    <\/p>\r\n\r\n                    <a href=\"#register\" class=\"pw-faq2-button\">\r\n                        \u0417\u0430\u043f\u0438\u0441\u0430\u0442\u0438\u0441\u044f \u043d\u0430 \u043a\u0443\u0440\u0441\r\n                    <\/a>\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fe9d2cd elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"fe9d2cd\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6726420\" data-id=\"6726420\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8deff51 elementor-widget elementor-widget-html\" data-id=\"8deff51\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* =========================\r\n   PLAYWRIGHT FINAL CTA\r\n========================= *\/\r\n\r\n.pw-final {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    padding: 100px 20px;\r\n    font-family: inherit;\r\n    color: #ffffff;\r\n    background:\r\n        radial-gradient(circle at 15% 20%, rgba(34,197,94,.18), transparent 28%),\r\n        radial-gradient(circle at 85% 80%, rgba(74,222,128,.10), transparent 28%),\r\n        linear-gradient(180deg, #06110b 0%, #08170f 55%, #06110b 100%);\r\n}\r\n\r\n.pw-final,\r\n.pw-final * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.pw-final * {\r\n    max-width: 100%;\r\n}\r\n\r\n.pw-final::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    background:\r\n        linear-gradient(rgba(74,222,128,.035) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(74,222,128,.035) 1px, transparent 1px);\r\n    background-size: 72px 72px;\r\n}\r\n\r\n.pw-final-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1120px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.pw-final-card {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 60px;\r\n    border: 1px solid rgba(74,222,128,.18);\r\n    border-radius: 28px;\r\n    background:\r\n        radial-gradient(circle at 85% 20%, rgba(34,197,94,.14), transparent 30%),\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(255,255,255,.05),\r\n            rgba(255,255,255,.018)\r\n        );\r\n    box-shadow: 0 30px 80px rgba(0,0,0,.22);\r\n}\r\n\r\n.pw-final-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -120px;\r\n    right: -120px;\r\n    width: 280px;\r\n    height: 280px;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(74,222,128,.14);\r\n}\r\n\r\n.pw-final-grid {\r\n    display: grid;\r\n    grid-template-columns: minmax(0,1fr) 300px;\r\n    gap: 50px;\r\n    align-items: center;\r\n}\r\n\r\n.pw-final-content {\r\n    min-width: 0;\r\n}\r\n\r\n.pw-final-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 20px;\r\n    padding: 8px 14px;\r\n    border: 1px solid rgba(74,222,128,.22);\r\n    border-radius: 100px;\r\n    background: rgba(34,197,94,.08);\r\n    color: #4ade80;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: .7px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.pw-final-badge::before {\r\n    content: \"\";\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #4ade80;\r\n    box-shadow: 0 0 12px rgba(74,222,128,.8);\r\n}\r\n\r\n.pw-final h2 {\r\n    margin: 0 0 22px !important;\r\n    padding: 0 !important;\r\n    color: #ffffff !important;\r\n    font-size: clamp(40px,5.5vw,64px) !important;\r\n    line-height: 1.04 !important;\r\n    font-weight: 850 !important;\r\n    letter-spacing: -2px;\r\n}\r\n\r\n.pw-final h2 span {\r\n    display: block;\r\n    color: #4ade80 !important;\r\n}\r\n\r\n.pw-final-text {\r\n    max-width: 720px;\r\n    margin: 0 0 30px !important;\r\n    color: #a9b7ae !important;\r\n    font-size: 18px !important;\r\n    line-height: 1.75 !important;\r\n}\r\n\r\n.pw-final-text strong {\r\n    color: #ffffff !important;\r\n}\r\n\r\n.pw-final-points {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n    margin-bottom: 34px;\r\n}\r\n\r\n.pw-final-point {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n    padding: 9px 12px;\r\n    border: 1px solid rgba(255,255,255,.07);\r\n    border-radius: 9px;\r\n    background: rgba(255,255,255,.025);\r\n    color: #bac6be;\r\n    font-size: 12px;\r\n    line-height: 1.3;\r\n}\r\n\r\n.pw-final-point::before {\r\n    content: \"\u2713\";\r\n    color: #4ade80;\r\n    font-weight: 900;\r\n}\r\n\r\n.pw-final-actions {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 12px;\r\n}\r\n\r\n.pw-final-primary {\r\n    display: inline-flex !important;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 54px;\r\n    padding: 15px 24px !important;\r\n    border: 1px solid #22c55e !important;\r\n    border-radius: 12px !important;\r\n    background: #22c55e !important;\r\n    color: #06110b !important;\r\n    font-size: 14px !important;\r\n    font-weight: 850 !important;\r\n    text-decoration: none !important;\r\n    box-shadow: 0 14px 32px rgba(34,197,94,.18);\r\n    transition: .25s ease;\r\n}\r\n\r\n.pw-final-primary:hover {\r\n    transform: translateY(-2px);\r\n    background: #4ade80 !important;\r\n}\r\n\r\n.pw-final-secondary {\r\n    display: inline-flex !important;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 54px;\r\n    padding: 15px 24px !important;\r\n    border: 1px solid rgba(255,255,255,.11) !important;\r\n    border-radius: 12px !important;\r\n    background: rgba(255,255,255,.03) !important;\r\n    color: #e8f0eb !important;\r\n    font-size: 14px !important;\r\n    font-weight: 750 !important;\r\n    text-decoration: none !important;\r\n    transition: .25s ease;\r\n}\r\n\r\n.pw-final-secondary:hover {\r\n    border-color: rgba(74,222,128,.26) !important;\r\n    background: rgba(34,197,94,.08) !important;\r\n}\r\n\r\n\r\n\/* RIGHT SIDE *\/\r\n\r\n.pw-final-side {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 11px;\r\n    min-width: 0;\r\n}\r\n\r\n.pw-final-stat {\r\n    padding: 18px;\r\n    border: 1px solid rgba(255,255,255,.07);\r\n    border-radius: 15px;\r\n    background: rgba(255,255,255,.035);\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.pw-final-stat strong {\r\n    display: block;\r\n    margin-bottom: 4px;\r\n    color: #4ade80;\r\n    font-size: 18px;\r\n    line-height: 1.3;\r\n}\r\n\r\n.pw-final-stat span {\r\n    display: block;\r\n    color: #98a79d;\r\n    font-size: 11px;\r\n    line-height: 1.45;\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width: 850px) {\r\n\r\n    .pw-final {\r\n        padding: 80px 18px;\r\n    }\r\n\r\n    .pw-final-card {\r\n        padding: 42px;\r\n    }\r\n\r\n    .pw-final-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 35px;\r\n    }\r\n\r\n    .pw-final-side {\r\n        display: grid;\r\n        grid-template-columns: repeat(2,minmax(0,1fr));\r\n    }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .pw-final {\r\n        padding: 65px 16px;\r\n    }\r\n\r\n    .pw-final-card {\r\n        padding: 30px 22px;\r\n        border-radius: 20px;\r\n    }\r\n\r\n    .pw-final h2 {\r\n        font-size: clamp(33px,10vw,42px) !important;\r\n        letter-spacing: -1.2px;\r\n    }\r\n\r\n    .pw-final-text {\r\n        font-size: 16px !important;\r\n        line-height: 1.65 !important;\r\n    }\r\n\r\n    .pw-final-points {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    .pw-final-actions {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .pw-final-primary,\r\n    .pw-final-secondary {\r\n        width: 100%;\r\n    }\r\n\r\n    .pw-final-side {\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n}\r\n\r\n@media (max-width: 430px) {\r\n\r\n    .pw-final {\r\n        padding: 58px 12px;\r\n    }\r\n\r\n    .pw-final-card {\r\n        padding: 25px 17px;\r\n    }\r\n\r\n    .pw-final h2 {\r\n        font-size: 32px !important;\r\n    }\r\n\r\n    .pw-final-points {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .pw-final-side {\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 8px;\r\n    }\r\n\r\n    .pw-final-stat {\r\n        padding: 14px 12px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"pw-final\">\r\n\r\n    <div class=\"pw-final-container\">\r\n\r\n        <div class=\"pw-final-card\">\r\n\r\n            <div class=\"pw-final-grid\">\r\n\r\n\r\n                <!-- CONTENT -->\r\n\r\n                <div class=\"pw-final-content\">\r\n\r\n                    <div class=\"pw-final-badge\">\r\n                        \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\r\n                    <\/div>\r\n\r\n                    <h2>\r\n                        \u0413\u043e\u0442\u043e\u0432\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438\r\n                        <span>\u0432 Automation QA?<\/span>\r\n                    <\/h2>\r\n\r\n                    <p class=\"pw-final-text\">\r\n                        \u041e\u0441\u0432\u043e\u0439\u0442\u0435 <strong>Playwright + TypeScript<\/strong>,\r\n                        \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI- \u0438 API-\u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b,\r\n                        \u0441\u0442\u0440\u043e\u0438\u0442\u044c Automation Framework \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c\r\n                        \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c.\r\n                    <\/p>\r\n\r\n\r\n                    <div class=\"pw-final-points\">\r\n\r\n                        <div class=\"pw-final-point\">\r\n                            \u0416\u0438\u0432\u044b\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u044f\r\n                        <\/div>\r\n\r\n                        <div class=\"pw-final-point\">\r\n                            \u0420\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\r\n                        <\/div>\r\n\r\n                        <div class=\"pw-final-point\">\r\n                            \u0414\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0456\u0432\r\n                        <\/div>\r\n\r\n                        <div class=\"pw-final-point\">\r\n                            \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u043e\u0434\u0430\r\n                        <\/div>\r\n\r\n                        <div class=\"pw-final-point\">\r\n                            \u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0430\r\n                        <\/div>\r\n\r\n                        <div class=\"pw-final-point\">\r\n                            \u0421\u0435\u0440\u0442\u0438\u0444\u0456\u043a\u0430\u0442\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"pw-final-actions\">\r\n\r\n                        <a href=\"#register\" class=\"pw-final-primary\">\r\n                            \u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0443\u0440\u0441\r\n                        <\/a>\r\n\r\n                        <a href=\"#program\" class=\"pw-final-secondary\">\r\n                            \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443\r\n                        <\/a>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- SIDE -->\r\n\r\n                <div class=\"pw-final-side\">\r\n\r\n                    <div class=\"pw-final-stat\">\r\n                        <strong>2 \u043c\u0456\u0441\u044f\u0446\u0456<\/strong>\r\n                        <span>\u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u0443\u0440\u0441 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-final-stat\">\r\n                        <strong>2\u00d7 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e<\/strong>\r\n                        <span>\u0436\u0438\u0432\u044b\u0435 \u043e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043d\u044f\u0442\u0438\u044f<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-final-stat\">\r\n                        <strong>\u0434\u043e 5 \u0447\u0435\u043b\u043e\u0432\u0435\u043a<\/strong>\r\n                        <span>\u0432 \u0443\u0447\u0435\u0431\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0435<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"pw-final-stat\">\r\n                        <strong>Playwright + TS<\/strong>\r\n                        <span>\u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0435\u043a Automation QA<\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-63ee789e elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"63ee789e\" data-element_type=\"section\" id=\"register\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d5e5bb8\" data-id=\"5d5e5bb8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-15457eb1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"15457eb1\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5934224e\" data-id=\"5934224e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5258ab56 elementor-widget elementor-widget-heading\" data-id=\"5258ab56\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u0438\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0431\u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u0442\u044f<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-584a6351 elementor-widget elementor-widget-text-editor\" data-id=\"584a6351\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>\u0426\u0435 \u0447\u0443\u0434\u043e\u0432\u0430 \u043c\u043e\u0436\u043b\u0438\u0432\u0456\u0441\u0442\u044c \u043f\u043e\u0437\u043d\u0430\u0439\u043e\u043c\u0438\u0442\u0438\u0441\u044f \u0437 \u043c\u0435\u043d\u0442\u043e\u0440\u043e\u043c, \u0432\u0438\u0432\u0447\u0438\u0442\u0438 \u043f\u0456\u0434\u0445\u043e\u0434\u0438 \u0434\u043e \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0442\u0430 \u043f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0442\u0438\u0441\u044f, \u0449\u043e \u043d\u0430\u0448 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u043c \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454 \u0432\u0430\u0448\u0438\u043c \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f\u043c.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50b5d692 elementor-mobile-button-align-stretch elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"50b5d692\" data-element_type=\"widget\" data-settings=\"{&quot;button_width_mobile&quot;:&quot;100&quot;,&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"Playwright_level\" action=\"\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"19657\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"50b5d692\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432\" \/>\n\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_4aef919 elementor-col-33 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_4aef919\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tName\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_4aef919]\" id=\"form-field-field_4aef919\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"\u0406\u043c&#039;\u044f\" required=\"required\" aria-required=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_a2eae0f elementor-col-33 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_a2eae0f\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tphone\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_a2eae0f]\" id=\"form-field-field_a2eae0f\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\" required=\"required\" aria-required=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-33 elementor-sm-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tEmail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Email\" required=\"required\" aria-required=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons elementor-sm-100\">\n\t\t\t\t\t<button type=\"submit\" class=\"elementor-button elementor-size-md\">\n\t\t\t\t\t\t<span >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u0438\u0441\u044c<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<input type=\"hidden\" name=\"trp-form-language\" value=\"ua\"\/><\/form>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3e6451d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3e6451d\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-002d338\" data-id=\"002d338\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d993497 elementor-widget elementor-widget-text-editor\" data-id=\"d993497\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<div class=\"ds-markdown ds-markdown--block\"><h1>\u041a\u0443\u0440\u0441 Playwright TypeScript \u2014 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043b\u044f QA<\/h1><p>\u0425\u043e\u0447\u0435\u0442\u0435 \u043e\u0441\u0432\u043e\u0457\u0442\u0438 <strong>Playwright TypeScript<\/strong> \u0442\u0430 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0441\u0443\u0447\u0430\u0441\u043d\u0456 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u0456 \u0442\u0435\u0441\u0442\u0438 \u0434\u043b\u044f \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432? \u041d\u0430\u0448 <strong>\u043a\u0443\u0440\u0441 Playwright TypeScript<\/strong> \u2014 \u0446\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0435 \u043e\u043d\u043b\u0430\u0439\u043d-\u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0434\u043b\u044f QA Engineer, Manual QA \u0442\u0430 Automation QA, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u0440\u043e\u0437\u0432\u0438\u0432\u0430\u0442\u0438\u0441\u044f \u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0442\u0430 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u043e\u0434\u043d\u0438\u043c \u0456\u0437 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0445 \u0441\u0442\u0435\u043a\u0456\u0432 \u2014 <strong>TypeScript + Playwright<\/strong>.<\/p><p>\u041f\u0456\u0434 \u0447\u0430\u0441 \u043a\u0443\u0440\u0441\u0443 \u0432\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438 \u043d\u0430 TypeScript, \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Playwright, \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 UI \u0442\u0430 API \u0442\u0435\u0441\u0442\u0438, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 Page Object Model, Git, GitHub \u0442\u0430 CI\/CD, \u0430 \u0442\u0430\u043a\u043e\u0436 \u043f\u043e\u0431\u0443\u0434\u0443\u0454\u0442\u0435 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 \u043f\u0440\u043e\u0454\u043a\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f.<\/p><h2>\u0429\u043e \u0442\u0430\u043a\u0435 Playwright TypeScript?<\/h2><p><strong>Playwright<\/strong> \u2014 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0439 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u0456\u0434 Microsoft, \u044f\u043a\u0438\u0439 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u0442\u0438 \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0438 \u0432 Chromium, Firefox \u0442\u0430 WebKit.<\/p><p>\u0423 \u043f\u043e\u0454\u0434\u043d\u0430\u043d\u043d\u0456 \u0437 <strong>TypeScript<\/strong> Playwright \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0432\u0430\u043d\u0456, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432\u0430\u043d\u0456 \u0442\u0430 \u0437\u0440\u0443\u0447\u043d\u0456 \u0434\u043b\u044f \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u0456 \u0442\u0435\u0441\u0442\u0438.<\/p><p>\u0421\u0430\u043c\u0435 \u0442\u043e\u043c\u0443 \u0441\u0442\u0435\u043a <strong>Playwright + TypeScript<\/strong> \u0432\u0430\u0440\u0442\u043e \u0432\u0438\u0432\u0447\u0430\u0442\u0438 QA Engineer, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432\u0456\u0434 \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0430\u0431\u043e \u0440\u043e\u0437\u0448\u0438\u0440\u0438\u0442\u0438 \u0441\u0432\u043e\u0457 \u043d\u0430\u0432\u0438\u0447\u043a\u0438 QA Automation.<\/p><h2>\u041a\u043e\u043c\u0443 \u043f\u0456\u0434\u0456\u0439\u0434\u0435 \u043a\u0443\u0440\u0441 Playwright TypeScript?<\/h2><p>\u041d\u0430\u0448\u0435 <strong>\u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f Playwright TypeScript<\/strong> \u043f\u0456\u0434\u0456\u0439\u0434\u0435:<\/p><ul><li><p>Manual QA Engineer, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 Automation QA;<\/p><\/li><li><p>QA Engineer, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044e \u043d\u0430 TypeScript;<\/p><\/li><li><p>Automation QA, \u044f\u043a\u0456 \u043f\u043b\u0430\u043d\u0443\u044e\u0442\u044c \u043e\u0441\u0432\u043e\u0457\u0442\u0438 Playwright;<\/p><\/li><li><p>\u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043b\u044c\u043d\u0438\u043a\u0430\u043c, \u044f\u043a\u0456 \u0432\u0436\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043b\u0438 \u0456\u0437 Selenium \u0430\u0431\u043e Cypress;<\/p><\/li><li><p>QA-\u0444\u0430\u0445\u0456\u0432\u0446\u044f\u043c, \u044f\u043a\u0456 \u0445\u043e\u0447\u0443\u0442\u044c \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0441\u0443\u0447\u0430\u0441\u043d\u0456 UI \u0442\u0430 API \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0438;<\/p><\/li><li><p>\u0441\u043f\u0435\u0446\u0456\u0430\u043b\u0456\u0441\u0442\u0430\u043c, \u044f\u043a\u0456 \u0433\u043e\u0442\u0443\u044e\u0442\u044c\u0441\u044f \u0434\u043e \u0441\u043f\u0456\u0432\u0431\u0435\u0441\u0456\u0434 \u043d\u0430 \u043f\u043e\u0437\u0438\u0446\u0456\u0457 QA Automation Engineer.<\/p><\/li><\/ul><p>\u0414\u043b\u044f \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432\u0430\u0436\u043b\u0438\u0432\u0430 \u043d\u0435 \u0442\u0456\u043b\u044c\u043a\u0438 \u0442\u0435\u043e\u0440\u0456\u044f. \u0422\u043e\u043c\u0443 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 \u043a\u0443\u0440\u0441\u0443 \u0437\u0440\u043e\u0431\u043b\u0435\u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0456\u0439 \u0440\u043e\u0431\u043e\u0442\u0456 \u0437 <strong>TypeScript \u0442\u0430 Playwright<\/strong>.<\/p><h2>\u0429\u043e \u0432\u0438 \u0432\u0438\u0432\u0447\u0438\u0442\u0435 \u043d\u0430 \u043a\u0443\u0440\u0441\u0456 Playwright + TypeScript?<\/h2><p>\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u0430 \u043a\u0443\u0440\u0441\u0443 \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0430 \u0442\u0430\u043a, \u0449\u043e\u0431 \u043f\u043e\u0441\u0442\u0443\u043f\u043e\u0432\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432\u0456\u0434 \u043e\u0441\u043d\u043e\u0432 TypeScript \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f.<\/p><p>\u041f\u0456\u0434 \u0447\u0430\u0441 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432\u0438 \u0432\u0438\u0432\u0447\u0438\u0442\u0435:<\/p><ul><li><p>\u043e\u0441\u043d\u043e\u0432\u0438 TypeScript \u0434\u043b\u044f QA Automation;<\/p><\/li><li><p>\u0437\u043c\u0456\u043d\u043d\u0456, \u0442\u0438\u043f\u0438 \u0434\u0430\u043d\u0438\u0445, \u0444\u0443\u043d\u043a\u0446\u0456\u0457, \u043a\u043b\u0430\u0441\u0438 \u0442\u0430 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0438;<\/p><\/li><li><p>\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f \u0442\u0430 async\/await;<\/p><\/li><li><p>\u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f Playwright;<\/p><\/li><li><p>\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Playwright Test;<\/p><\/li><li><p>Playwright Locators;<\/p><\/li><li><p>Assertions \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0456 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f;<\/p><\/li><li><p>\u0440\u043e\u0431\u043e\u0442\u0443 \u0437 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0442\u0430 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438;<\/p><\/li><li><p>\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0456 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0438, \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0442\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0438;<\/p><\/li><li><p>\u0440\u043e\u0431\u043e\u0442\u0443 \u0437 \u0444\u0430\u0439\u043b\u0430\u043c\u0438;<\/p><\/li><li><p>UI Automation Testing;<\/p><\/li><li><p>API Testing \u0443 Playwright;<\/p><\/li><li><p>\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0430 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0441\u0442\u0430\u043d\u0443 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430;<\/p><\/li><li><p>Page Object Model;<\/p><\/li><li><p>reusable components \u0442\u0430 helper methods;<\/p><\/li><li><p>Fixtures;<\/p><\/li><li><p>Hooks;<\/p><\/li><li><p>\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0435\u0441\u0442\u0456\u0432;<\/p><\/li><li><p>\u0440\u043e\u0431\u043e\u0442\u0443 \u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438;<\/p><\/li><li><p>\u043f\u0430\u0440\u0430\u043b\u0435\u043b\u044c\u043d\u0438\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u0456\u0432;<\/p><\/li><li><p>screenshots, videos \u0442\u0430 Trace Viewer;<\/p><\/li><li><p>debugging Playwright-\u0442\u0435\u0441\u0442\u0456\u0432;<\/p><\/li><li><p>Git \u0442\u0430 GitHub;<\/p><\/li><li><p>CI\/CD \u0442\u0430 GitHub Actions;<\/p><\/li><li><p>\u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0443 \u0432\u043b\u0430\u0441\u043d\u043e\u0433\u043e Playwright Automation Framework.<\/p><\/li><\/ul><h2>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0438\u0439 \u043a\u0443\u0440\u0441 Playwright TypeScript<\/h2><p>\u0426\u0435 \u043d\u0435 \u043a\u0443\u0440\u0441, \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u043b\u0438\u0448\u0435 \u043d\u0430 \u0442\u0435\u043e\u0440\u0456\u0457 \u0430\u0431\u043e \u043f\u0435\u0440\u0435\u0433\u043b\u044f\u0434\u0456 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0445 \u0432\u0456\u0434\u0435\u043e.<\/p><p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430 \u0447\u0430\u0441\u0442\u0438\u043d\u0430 <strong>\u043a\u0443\u0440\u0441\u0443 Playwright TypeScript \u2014 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044f \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/strong>.<\/p><p>\u041d\u0430 \u0437\u0430\u043d\u044f\u0442\u0442\u044f\u0445 \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u0438 TypeScript-\u043a\u043e\u0434, \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 Playwright-\u0442\u0435\u0441\u0442\u0438, \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u043c\u0438 \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0430\u043c\u0438, \u0437\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0438 \u0441\u0442\u0430\u0431\u0456\u043b\u044c\u043d\u0456 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438, \u0430\u043d\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u043f\u043e\u043c\u0438\u043b\u043a\u0438 \u0442\u0430 \u043f\u043e\u0441\u0442\u0443\u043f\u043e\u0432\u043e \u0431\u0443\u0434\u0443\u0432\u0430\u0442\u0438 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 Automation Framework.<\/p><p>\u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043e\u043a\u0440\u0435\u043c\u0456 \u043a\u043e\u043c\u0430\u043d\u0434\u0438 Playwright, \u0430 \u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438, <strong>\u044f\u043a \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0439 QA Automation \u043f\u0440\u043e\u0454\u043a\u0442 \u043d\u0430 TypeScript<\/strong>.<\/p><h2>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044f \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0430 TypeScript + Playwright<\/h2><p>\u041f\u0456\u0434 \u0447\u0430\u0441 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u0434\u0430\u0454\u043c\u043e \u043f\u043e\u0432\u043d\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u0456\u0432:<\/p><p><strong>Test Scenario \u2192 TypeScript \u2192 Playwright \u2192 Page Object \u2192 Test Data \u2192 \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u0456\u0432 \u2192 Debug \u2192 Report \u2192 GitHub \u2192 CI\/CD.<\/strong><\/p><p>\u0422\u0430\u043a\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438 \u043d\u0435 \u043b\u0438\u0448\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Playwright, \u0430\u043b\u0435 \u0439 \u0430\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0441\u0443\u0447\u0430\u0441\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f.<\/p><p>\u041e\u043a\u0440\u0435\u043c\u0443 \u0443\u0432\u0430\u0433\u0443 \u043f\u0440\u0438\u0434\u0456\u043b\u044f\u0454\u043c\u043e \u044f\u043a\u043e\u0441\u0442\u0456 \u043a\u043e\u0434\u0443: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0456 Page Object Model, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432, \u0440\u043e\u0431\u043e\u0442\u0456 \u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438 \u0442\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0446\u0456 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443.<\/p><h2>UI \u0442\u0430 API Testing \u0443 Playwright<\/h2><p>Playwright \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043d\u0435 \u0442\u0456\u043b\u044c\u043a\u0438 \u0434\u043b\u044f UI Automation.<\/p><p>\u041d\u0430 <strong>\u043a\u0443\u0440\u0441\u0456 Playwright TypeScript<\/strong> \u0432\u0438 \u0442\u0430\u043a\u043e\u0436 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 API-\u0442\u0435\u0441\u0442\u0438: \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u0438 HTTP-\u0437\u0430\u043f\u0438\u0442\u0438, \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0442\u0438 status code \u0442\u0430 response body, \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 JSON \u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 API \u0443 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044f\u0445.<\/p><p>\u0426\u0435 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043a\u043e\u043c\u0431\u0456\u043d\u0443\u0432\u0430\u0442\u0438 <strong>UI Testing \u0442\u0430 API Testing<\/strong> \u0432 \u043e\u0434\u043d\u043e\u043c\u0443 Automation-\u043f\u0440\u043e\u0454\u043a\u0442\u0456.<\/p><h2>Page Object Model \u0443 Playwright TypeScript<\/h2><p>\u041e\u043a\u0440\u0435\u043c\u0438\u0439 \u0431\u043b\u043e\u043a \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043f\u0440\u0438\u0441\u0432\u044f\u0447\u0435\u043d\u0438\u0439 <strong>Page Object Model (POM)<\/strong>.<\/p><p>\u0412\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u043e\u0437\u0434\u0456\u043b\u044f\u0442\u0438 \u043b\u043e\u043a\u0430\u0442\u043e\u0440\u0438, \u043c\u0435\u0442\u043e\u0434\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a \u0442\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u0443 \u043b\u043e\u0433\u0456\u043a\u0443, \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 BasePage, reusable components \u0442\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u043d\u0443 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Playwright-\u043f\u0440\u043e\u0454\u043a\u0442\u0443.<\/p><p>\u0426\u0435 \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u043e \u0432\u0430\u0436\u043b\u0438\u0432\u043e \u0434\u043b\u044f QA Automation Engineer, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u043e\u0454\u043a\u0442\u0430\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043d\u044c\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u0438 \u0442\u0435\u0441\u0442 \u2014 \u043a\u043e\u0434 \u043f\u043e\u0432\u0438\u043d\u0435\u043d \u0437\u0430\u043b\u0438\u0448\u0430\u0442\u0438\u0441\u044f \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u043b\u0438\u043c \u0456 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432\u0430\u043d\u0438\u043c.<\/p><h2>Playwright TypeScript \u0442\u0430 CI\/CD<\/h2><p>\u0421\u0443\u0447\u0430\u0441\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044f \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0435 \u0437\u0430\u043a\u0456\u043d\u0447\u0443\u0454\u0442\u044c\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0442\u0435\u0441\u0442\u0456\u0432.<\/p><p>\u041f\u0456\u0434 \u0447\u0430\u0441 \u043a\u0443\u0440\u0441\u0443 \u0432\u0438 \u043d\u0430\u0432\u0447\u0438\u0442\u0435\u0441\u044f \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Git \u0442\u0430 GitHub, \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0442\u0438 Automation-\u043f\u0440\u043e\u0454\u043a\u0442 \u0443 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u0457 \u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438 <strong>Playwright TypeScript \u0442\u0435\u0441\u0442\u0438 \u0432 CI\/CD<\/strong>.<\/p><p>\u0412\u0438 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0435 \u043f\u043e\u0432\u043d\u0438\u0439 \u0448\u043b\u044f\u0445 \u0432\u0456\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044f \u0442\u0435\u0441\u0442\u0443 \u0434\u043e \u0439\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0443.<\/p><h2>\u041e\u043d\u043b\u0430\u0439\u043d-\u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f Playwright TypeScript<\/h2><p><strong>\u041a\u0443\u0440\u0441 Playwright TypeScript \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u043d\u043b\u0430\u0439\u043d \u0443 Microsoft Teams<\/strong> \u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u0456 \u0436\u0438\u0432\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0438\u0445 \u0437\u0430\u043d\u044f\u0442\u044c \u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c.<\/p><p>\u0426\u0435 \u043d\u0435 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0456 \u0432\u0435\u0431\u0456\u043d\u0430\u0440\u0438.<\/p><p>\u041f\u0456\u0434 \u0447\u0430\u0441 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0432\u0438 \u043f\u0438\u0448\u0435\u0442\u0435 \u043a\u043e\u0434 \u0440\u0430\u0437\u043e\u043c \u0456\u0437 \u0432\u0438\u043a\u043b\u0430\u0434\u0430\u0447\u0435\u043c, \u0441\u0442\u0430\u0432\u0438\u0442\u0435 \u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u0440\u043e\u0437\u0431\u0438\u0440\u0430\u0454\u0442\u0435 \u043f\u043e\u043c\u0438\u043b\u043a\u0438 \u0442\u0430 \u043e\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u0435 \u0437\u0432\u043e\u0440\u043e\u0442\u043d\u0438\u0439 \u0437\u0432&#8217;\u044f\u0437\u043e\u043a.<\/p><p>\u041d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0443 \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u0438\u0445 \u0433\u0440\u0443\u043f\u0430\u0445, \u0449\u043e \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043f\u0440\u0438\u0434\u0456\u043b\u0438\u0442\u0438 \u0443\u0432\u0430\u0433\u0443 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0456\u0439 \u0440\u043e\u0431\u043e\u0442\u0456 \u043a\u043e\u0436\u043d\u043e\u0433\u043e \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430.<\/p><h2>\u0429\u043e \u0432\u0438 \u0437\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0456\u0441\u043b\u044f \u043a\u0443\u0440\u0441\u0443?<\/h2><p>\u041f\u0456\u0441\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044f \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0432\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438, \u044f\u043a \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 <strong>TypeScript \u0442\u0430 Playwright \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u0435\u0431\u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0456\u0432<\/strong>.<\/p><p>\u0412\u0438 \u0437\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e:<\/p><ul><li><p>\u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 Playwright-\u0442\u0435\u0441\u0442\u0438 \u043d\u0430 TypeScript;<\/p><\/li><li><p>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 UI \u0442\u0435\u0441\u0442\u043e\u0432\u0456 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457;<\/p><\/li><li><p>\u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 API-\u0442\u0435\u0441\u0442\u0438;<\/p><\/li><li><p>\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 Page Object Model;<\/p><\/li><li><p>\u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Fixtures \u0442\u0430 Hooks;<\/p><\/li><li><p>\u043e\u0440\u0433\u0430\u043d\u0456\u0437\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Automation Framework;<\/p><\/li><li><p>\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u0438 \u0442\u0430 \u0430\u043d\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u0456 \u0442\u0435\u0441\u0442\u0438;<\/p><\/li><li><p>\u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437 Git \u0442\u0430 GitHub;<\/p><\/li><li><p>\u043d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0437\u0430\u043f\u0443\u0441\u043a Playwright-\u0442\u0435\u0441\u0442\u0456\u0432 \u0443 CI\/CD;<\/p><\/li><li><p>\u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u0442\u0430 \u0440\u043e\u0437\u0432\u0438\u0432\u0430\u0442\u0438 QA Automation \u043f\u0440\u043e\u0454\u043a\u0442.<\/p><\/li><\/ul><h2>\u041a\u0443\u0440\u0441 Playwright TypeScript \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0443 \u0432 Automation QA<\/h2><p>\u042f\u043a\u0449\u043e \u0432\u0438 \u043f\u0440\u0430\u0446\u044e\u0454\u0442\u0435 Manual QA \u0442\u0430 \u0445\u043e\u0447\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044e \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f, <strong>Playwright TypeScript \u043a\u0443\u0440\u0441<\/strong> \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438 \u0448\u043b\u044f\u0445 \u0432\u0456\u0434 \u043e\u0441\u043d\u043e\u0432 TypeScript \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043f\u043e\u0432\u043d\u043e\u0446\u0456\u043d\u043d\u0438\u0445 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u043e\u0432\u0430\u043d\u0438\u0445 \u0442\u0435\u0441\u0442\u0456\u0432.<\/p><p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0432\u0436\u0435 Automation QA, \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435 \u043e\u0441\u0432\u043e\u0457\u0442\u0438 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0439 \u0441\u0442\u0435\u043a <strong>TypeScript + Playwright<\/strong> \u0442\u0430 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u0443 \u0432\u043b\u0430\u0441\u043d\u0438\u0445 \u043f\u0440\u043e\u0454\u043a\u0442\u0430\u0445.<\/p><p>\u041f\u0440\u0438\u0454\u0434\u043d\u0443\u0439\u0442\u0435\u0441\u044c \u0434\u043e <strong>\u043a\u0443\u0440\u0441\u0443 Playwright TypeScript<\/strong> \u0442\u0430 \u043d\u0430\u0432\u0447\u0456\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0446\u0456.<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0613f61 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0613f61\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b181ba1\" data-id=\"b181ba1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d206ae0 elementor-widget elementor-widget-template\" data-id=\"d206ae0\" data-element_type=\"widget\" data-widget_type=\"template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-template\">\n\t\t\t\t\t<div data-elementor-type=\"section\" data-elementor-id=\"10286\" class=\"elementor elementor-10286\">\n\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t<footer class=\"elementor-section elementor-top-section elementor-element elementor-element-2ba2e5c4 elementor-section-stretched elementor-hidden-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2ba2e5c4\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6e0428dd\" data-id=\"6e0428dd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-295e450d elementor-widget elementor-widget-text-editor\" data-id=\"295e450d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>\u041c\u0438 \u0442\u0430\u043a\u043e\u0436 \u0437\u043d\u0430\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u044f \u0432 \u0441\u043e\u0446\u0456\u0430\u043b\u044c\u043d\u0438\u0445 \u043c\u0435\u0440\u0435\u0436\u0430\u0445! \u041f\u0456\u0434\u043f\u0438\u0441\u0443\u0439\u0441\u044f \u043d\u0430 \u043d\u0430\u0441 \u0442\u0430 \u043e\u0442\u0440\u0438\u043c\u0443\u0439 \u043e\u0441\u0442\u0430\u043d\u043d\u0456 \u043d\u043e\u0432\u0438\u043d\u0438, \u0430\u043a\u0446\u0456\u0457, \u0437\u043d\u0438\u0436\u043a\u0438, \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u0456 \u0442\u0440\u0435\u043d\u0456\u043d\u0433\u0438 \u0442\u0430 \u0443\u0447\u0430\u0441\u0442\u044c \u0443 \u043c\u0430\u0440\u0430\u0444\u043e\u043d\u0430\u0445. <br \/><strong>\u0411\u0443\u0434\u0435\u043c\u043e \u0440\u0430\u0434\u0456 \u0431\u0430\u0447\u0438\u0442\u0438 \u0442\u0435\u0431\u0435 \u0443 \u043d\u0430\u0448\u0456\u0439 \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0442\u0456!<\/strong><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4195a124 elementor-shape-circle elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"4195a124\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3d4d16f\" href=\"https:\/\/www.facebook.com\/iqaengineercom\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook-f<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-facebook-f\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-b9433ea\" href=\"https:\/\/www.instagram.com\/iqaengineer\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-instagram\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-viber elementor-repeater-item-0484ffe\" href=\"https:\/\/invite.viber.com\/?g2=AQBRYlgPsqwMrlFfgsDXv6UZt4oaSNq4XDDfCCOGHu%2Fjs4uhYVCQXtMPAtNdw%2B3p\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Viber<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-viber\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-telegram elementor-repeater-item-dec58a2\" href=\"https:\/\/t.me\/iqaengineer\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Telegram<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-telegram\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-637dd5d elementor-widget elementor-widget-text-editor\" data-id=\"637dd5d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><a href=\"https:\/\/iqaengineer.com\/ua\/oferta\/\" target=\"_blank\" rel=\"noopener\">\u041f\u0443\u0431\u043b\u0456\u0447\u043d\u0430 \u043e\u0444\u0435\u0440\u0442\u0430<\/a>. \u0410\u0432\u0442\u043e\u0440\u0441\u044c\u043a\u0435 \u043f\u0440\u0430\u0432\u043e \u00a9 2026 \u0428\u043a\u043e\u043b\u0430 \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043b\u044c\u043d\u0438\u043a\u0456\u0432<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-3322edb5\" data-id=\"3322edb5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-647e9c60 elementor-widget elementor-widget-heading\" data-id=\"647e9c60\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">\u041a\u0443\u0440\u0441\u0438<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-2445683b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2445683b\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-32dd0041\" data-id=\"32dd0041\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2f08a4e elementor-align-left elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"2f08a4e\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/beginner_level\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u043e\u0447\u0430\u0442\u043a\u043e\u0432\u0438\u0439 \u0440\u0456\u0432\u0435\u043d\u044c<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/advanced-testing-level\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u0440\u043e\u0441\u0443\u043d\u0443\u0442\u0438\u0439 \u0440\u0456\u0432\u0435\u043d\u044c<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/advanced_level_more_projects\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u0440\u043e\u0441\u0443\u043d\u0443\u0442\u0438\u0439 \u0440\u0456\u0432\u0435\u043d\u044c.\u0411\u0456\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0454\u043a\u0442\u0456\u0432<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/automation_testing\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044f<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/test_app_mobile\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0422\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u0434\u043e\u0434\u0430\u0442\u043a\u0456\u0432<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-184fb16f\" data-id=\"184fb16f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3b24d56 elementor-align-left elementor-widget__width-initial elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"3b24d56\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/api_testing\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0422\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f REST API<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/sql\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0437 SQL<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/testing_jmeter\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041d\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0432\u0430\u043b\u044c\u043d\u0435 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437 Jmeter<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/testing_devtools\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">DevTools<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/testing_fiddler\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Fiddler<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/footer>\n\t\t\t\t<footer class=\"elementor-section elementor-top-section elementor-element elementor-element-b667a98 elementor-section-stretched elementor-hidden-desktop elementor-hidden-tablet elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b667a98\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3192d85\" data-id=\"3192d85\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3bdf306 elementor-widget elementor-widget-text-editor\" data-id=\"3bdf306\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>\u041c\u0438 \u0442\u0430\u043a\u043e\u0436 \u0437\u043d\u0430\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u044f \u0432 \u0441\u043e\u0446\u0456\u0430\u043b\u044c\u043d\u0438\u0445 \u043c\u0435\u0440\u0435\u0436\u0430\u0445! \u041f\u0456\u0434\u043f\u0438\u0441\u0443\u0439\u0441\u044f \u043d\u0430 \u043d\u0430\u0441 \u0442\u0430 \u043e\u0442\u0440\u0438\u043c\u0443\u0439 \u043e\u0441\u0442\u0430\u043d\u043d\u0456 \u043d\u043e\u0432\u0438\u043d\u0438, \u0430\u043a\u0446\u0456\u0457, \u0437\u043d\u0438\u0436\u043a\u0438, \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u0456 \u0442\u0440\u0435\u043d\u0456\u043d\u0433\u0438 \u0442\u0430 \u0443\u0447\u0430\u0441\u0442\u044c \u0443 \u043c\u0430\u0440\u0430\u0444\u043e\u043d\u0430\u0445. <br \/><strong>\u0411\u0443\u0434\u0435\u043c\u043e \u0440\u0430\u0434\u0456 \u0431\u0430\u0447\u0438\u0442\u0438 \u0442\u0435\u0431\u0435 \u0443 \u043d\u0430\u0448\u0456\u0439 \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0442\u0456!<\/strong><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d410540 elementor-shape-circle elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"d410540\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3d4d16f\" href=\"https:\/\/www.facebook.com\/iqaengineercom\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook-f<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-facebook-f\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-b9433ea\" href=\"https:\/\/www.instagram.com\/iqaengineer\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-instagram\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-viber elementor-repeater-item-0484ffe\" href=\"https:\/\/invite.viber.com\/?g2=AQBRYlgPsqwMrlFfgsDXv6UZt4oaSNq4XDDfCCOGHu%2Fjs4uhYVCQXtMPAtNdw%2B3p\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Viber<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-viber\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-telegram elementor-repeater-item-dec58a2\" href=\"https:\/\/t.me\/iqaengineer\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Telegram<\/span>\n\t\t\t\t\t\t<i class=\"fab fa-telegram\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbaba89 elementor-widget elementor-widget-heading\" data-id=\"dbaba89\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">\u041a\u0443\u0440\u0441\u0438<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d52057 elementor-align-left elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"1d52057\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/beginner_level\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u043e\u0447\u0430\u0442\u043a\u043e\u0432\u0438\u0439 \u0440\u0456\u0432\u0435\u043d\u044c<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/advanced-testing-level\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u0440\u043e\u0441\u0443\u043d\u0443\u0442\u0438\u0439 \u0440\u0456\u0432\u0435\u043d\u044c<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/advanced_level_more_projects\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u0440\u043e\u0441\u0443\u043d\u0443\u0442\u0438\u0439 \u0440\u0456\u0432\u0435\u043d\u044c.\u0411\u0456\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0454\u043a\u0442\u0456\u0432<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/automation_testing\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044f<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/test_app_mobile\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0422\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u0434\u043e\u0434\u0430\u0442\u043a\u0456\u0432<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b46ca9 elementor-align-left elementor-widget__width-initial elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"4b46ca9\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/api_testing\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u0422\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f REST API<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/sql\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0437 SQL<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/testing_jmeter\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\u041d\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0432\u0430\u043b\u044c\u043d\u0435 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437 Jmeter<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/testing_devtools\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">DevTools<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/iqaengineer.com\/ua\/testing_fiddler\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-caret-right\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Fiddler<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a61000 elementor-widget elementor-widget-text-editor\" data-id=\"4a61000\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p><a href=\"https:\/\/iqaengineer.com\/ua\/oferta\/\" target=\"_blank\" rel=\"noopener\">\u041f\u0443\u0431\u043b\u0456\u0447\u043d\u0430 \u043e\u0444\u0435\u0440\u0442\u0430<\/a>. \u0410\u0432\u0442\u043e\u0440\u0441\u044c\u043a\u0435 \u043f\u0440\u0430\u0432\u043e \u00a9 2026 \u0428\u043a\u043e\u043b\u0430 \u043f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043b\u044c\u043d\u0438\u043a\u0456\u0432<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/footer>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441 \u2022 QA Automation \u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA Automation Engineer \u041e\u0441\u0432\u043e\u0439\u0442\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 Playwright \u0438 \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 UI, API \u0438&hellip;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.9 (Yoast SEO v20.12) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer - \u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432<\/title>\n<meta name=\"description\" content=\"\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA Engineer. \u041d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI, API \u0438 E2E \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Page Object Model, Git, CI\/CD \u0438 Allure. 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/iqaengineer.com\/ua\/course_playwright\/\" \/>\n<meta property=\"og:locale\" content=\"uk_UA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer\" \/>\n<meta property=\"og:description\" content=\"\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA Engineer. \u041d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI, API \u0438 E2E \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Page Object Model, Git, CI\/CD \u0438 Allure. 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/iqaengineer.com\/ua\/course_playwright\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/iqaengineer\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-13T07:37:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u041f\u0440\u0438\u0431\u043b. \u0447\u0430\u0441 \u0447\u0438\u0442\u0430\u043d\u043d\u044f\" \/>\n\t<meta name=\"twitter:data1\" content=\"45 \u0445\u0432\u0438\u043b\u0438\u043d\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/iqaengineer.com\/course_playwright\/\",\"url\":\"https:\/\/iqaengineer.com\/course_playwright\/\",\"name\":\"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer - \u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432\",\"isPartOf\":{\"@id\":\"https:\/\/iqaengineer.com\/#website\"},\"datePublished\":\"2024-04-28T19:02:05+00:00\",\"dateModified\":\"2026-09-13T07:37:41+00:00\",\"description\":\"\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA Engineer. \u041d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI, API \u0438 E2E \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Page Object Model, Git, CI\/CD \u0438 Allure. 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432.\",\"breadcrumb\":{\"@id\":\"https:\/\/iqaengineer.com\/course_playwright\/#breadcrumb\"},\"inLanguage\":\"uk\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/iqaengineer.com\/course_playwright\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/iqaengineer.com\/course_playwright\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/iqaengineer.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/iqaengineer.com\/#website\",\"url\":\"https:\/\/iqaengineer.com\/\",\"name\":\"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432\",\"description\":\"\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445\",\"publisher\":{\"@id\":\"https:\/\/iqaengineer.com\/#organization\"},\"alternateName\":\"iQAEngineer: \u043a\u0443\u0440\u0441\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u041f\u041e, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/iqaengineer.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"uk\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/iqaengineer.com\/#organization\",\"name\":\"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432\",\"url\":\"https:\/\/iqaengineer.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"uk\",\"@id\":\"https:\/\/iqaengineer.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/iqaengineer.com\/wp-content\/uploads\/2020\/11\/logo_new.png\",\"contentUrl\":\"https:\/\/iqaengineer.com\/wp-content\/uploads\/2020\/11\/logo_new.png\",\"width\":250,\"height\":60,\"caption\":\"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432\"},\"image\":{\"@id\":\"https:\/\/iqaengineer.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/iqaengineer\/\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer - \u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432","description":"\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA Engineer. \u041d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI, API \u0438 E2E \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Page Object Model, Git, CI\/CD \u0438 Allure. 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/iqaengineer.com\/ua\/course_playwright\/","og_locale":"uk_UA","og_type":"article","og_title":"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer","og_description":"\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA Engineer. \u041d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI, API \u0438 E2E \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Page Object Model, Git, CI\/CD \u0438 Allure. 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432.","og_url":"https:\/\/iqaengineer.com\/ua\/course_playwright\/","og_site_name":"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432","article_publisher":"https:\/\/www.facebook.com\/iqaengineer\/","article_modified_time":"2026-09-13T07:37:41+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u041f\u0440\u0438\u0431\u043b. \u0447\u0430\u0441 \u0447\u0438\u0442\u0430\u043d\u043d\u044f":"45 \u0445\u0432\u0438\u043b\u0438\u043d"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/iqaengineer.com\/course_playwright\/","url":"https:\/\/iqaengineer.com\/course_playwright\/","name":"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer - \u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432","isPartOf":{"@id":"https:\/\/iqaengineer.com\/#website"},"datePublished":"2024-04-28T19:02:05+00:00","dateModified":"2026-09-13T07:37:41+00:00","description":"\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA Engineer. \u041d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI, API \u0438 E2E \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Page Object Model, Git, CI\/CD \u0438 Allure. 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e 5 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432.","breadcrumb":{"@id":"https:\/\/iqaengineer.com\/course_playwright\/#breadcrumb"},"inLanguage":"uk","potentialAction":[{"@type":"ReadAction","target":["https:\/\/iqaengineer.com\/course_playwright\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/iqaengineer.com\/course_playwright\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/iqaengineer.com\/"},{"@type":"ListItem","position":2,"name":"\u041a\u0443\u0440\u0441 Playwright + TypeScript \u0434\u043b\u044f QA \u2014 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 | iQAEngineer"}]},{"@type":"WebSite","@id":"https:\/\/iqaengineer.com\/#website","url":"https:\/\/iqaengineer.com\/","name":"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432","description":"\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445","publisher":{"@id":"https:\/\/iqaengineer.com\/#organization"},"alternateName":"iQAEngineer: \u043a\u0443\u0440\u0441\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u041f\u041e, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/iqaengineer.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"uk"},{"@type":"Organization","@id":"https:\/\/iqaengineer.com\/#organization","name":"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432","url":"https:\/\/iqaengineer.com\/","logo":{"@type":"ImageObject","inLanguage":"uk","@id":"https:\/\/iqaengineer.com\/#\/schema\/logo\/image\/","url":"https:\/\/iqaengineer.com\/wp-content\/uploads\/2020\/11\/logo_new.png","contentUrl":"https:\/\/iqaengineer.com\/wp-content\/uploads\/2020\/11\/logo_new.png","width":250,"height":60,"caption":"\u0428\u043a\u043e\u043b\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u043e\u0432"},"image":{"@id":"https:\/\/iqaengineer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/iqaengineer\/"]}]}},"_links":{"self":[{"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/pages\/19657"}],"collection":[{"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/comments?post=19657"}],"version-history":[{"count":104,"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/pages\/19657\/revisions"}],"predecessor-version":[{"id":24675,"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/pages\/19657\/revisions\/24675"}],"wp:attachment":[{"href":"https:\/\/iqaengineer.com\/ua\/wp-json\/wp\/v2\/media?parent=19657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}