[{"data":1,"prerenderedAt":382},["ShallowReactive",2],{"docs-/docs/guides/frontend-testing":3},{"id":4,"title":5,"body":6,"description":374,"extension":375,"meta":376,"navigation":377,"path":378,"seo":379,"stem":380,"__hash__":381},"docs/docs/guides/frontend-testing.md","Frontend Testing",{"type":7,"value":8,"toc":368},"minimark",[9,13,22,162,189,207,212,215,241,248,265,269,330,334,344,348,364],[10,11,5],"h1",{"id":12},"frontend-testing",[14,15,16,17,21],"p",{},"Define pages and elements in ",[18,19,20],"code",{},"testflowkit.yml",", then reference them by name in your scenarios.",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-yaml shiki shiki-themes github-light github-dark","frontend:\n  driver: \"rod\"              # or \"playwright\"\n  base_url: \"{{ env.base_url }}\"\n  default_timeout: 10000\n  headless: false\n  screenshot_on_failure: true\n  pages:\n    login: \"/login\"\n  elements:\n    login:\n      email_field: \"#email\"\n      submit_button: \"#submit\"\n","yaml","",[18,30,31,44,61,72,84,95,106,114,125,133,140,151],{"__ignoreMap":28},[32,33,36,40],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"s9eBZ","frontend",[32,41,43],{"class":42},"sVt8B",":\n",[32,45,47,50,53,57],{"class":34,"line":46},2,[32,48,49],{"class":38},"  driver",[32,51,52],{"class":42},": ",[32,54,56],{"class":55},"sZZnC","\"rod\"",[32,58,60],{"class":59},"sJ8bj","              # or \"playwright\"\n",[32,62,64,67,69],{"class":34,"line":63},3,[32,65,66],{"class":38},"  base_url",[32,68,52],{"class":42},[32,70,71],{"class":55},"\"{{ env.base_url }}\"\n",[32,73,75,78,80],{"class":34,"line":74},4,[32,76,77],{"class":38},"  default_timeout",[32,79,52],{"class":42},[32,81,83],{"class":82},"sj4cs","10000\n",[32,85,87,90,92],{"class":34,"line":86},5,[32,88,89],{"class":38},"  headless",[32,91,52],{"class":42},[32,93,94],{"class":82},"false\n",[32,96,98,101,103],{"class":34,"line":97},6,[32,99,100],{"class":38},"  screenshot_on_failure",[32,102,52],{"class":42},[32,104,105],{"class":82},"true\n",[32,107,109,112],{"class":34,"line":108},7,[32,110,111],{"class":38},"  pages",[32,113,43],{"class":42},[32,115,117,120,122],{"class":34,"line":116},8,[32,118,119],{"class":38},"    login",[32,121,52],{"class":42},[32,123,124],{"class":55},"\"/login\"\n",[32,126,128,131],{"class":34,"line":127},9,[32,129,130],{"class":38},"  elements",[32,132,43],{"class":42},[32,134,136,138],{"class":34,"line":135},10,[32,137,119],{"class":38},[32,139,43],{"class":42},[32,141,143,146,148],{"class":34,"line":142},11,[32,144,145],{"class":38},"      email_field",[32,147,52],{"class":42},[32,149,150],{"class":55},"\"#email\"\n",[32,152,154,157,159],{"class":34,"line":153},12,[32,155,156],{"class":38},"      submit_button",[32,158,52],{"class":42},[32,160,161],{"class":55},"\"#submit\"\n",[23,163,167],{"className":164,"code":165,"language":166,"meta":28,"style":28},"language-gherkin shiki shiki-themes github-light github-dark","Given the user goes to the \"login\" page\nWhen the user enters \"john@example.com\" into the \"email_field\" field\nAnd the user clicks the \"submit_button\" button\nThen the \"dashboard\" should be visible\n","gherkin",[18,168,169,174,179,184],{"__ignoreMap":28},[32,170,171],{"class":34,"line":35},[32,172,173],{},"Given the user goes to the \"login\" page\n",[32,175,176],{"class":34,"line":46},[32,177,178],{},"When the user enters \"john@example.com\" into the \"email_field\" field\n",[32,180,181],{"class":34,"line":63},[32,182,183],{},"And the user clicks the \"submit_button\" button\n",[32,185,186],{"class":34,"line":74},[32,187,188],{},"Then the \"dashboard\" should be visible\n",[190,191,193],"alert",{"type":192},"warning",[14,194,195,196,199,200,202,203,206],{},"The ",[18,197,198],{},"driver"," field is required when the ",[18,201,39],{}," block is defined. Use ",[18,204,205],{},"tkit install"," to set up Playwright.",[208,209,211],"h2",{"id":210},"typical-flow","Typical flow",[14,213,214],{},"Most UI scenarios follow the same pattern:",[216,217,218,229,235],"ol",{},[219,220,221,225,226],"li",{},[222,223,224],"strong",{},"Navigate"," — ",[18,227,228],{},"the user goes to the \"page_name\" page",[219,230,231,234],{},[222,232,233],{},"Interact"," — enter text, click buttons, select dropdowns, upload files",[219,236,237,240],{},[222,238,239],{},"Assert"," — check visibility, text content, URL, or field values",[14,242,243,244,247],{},"TestFlowKit waits for elements automatically before interacting. Adjust ",[18,245,246],{},"default_timeout"," in config if needed.",[14,249,250,251,254,255,258,259,264],{},"Use ",[18,252,253],{},"{{variable_name}}"," and ",[18,256,257],{},"{{ rand:email }}"," in any step value — see ",[260,261,263],"a",{"href":262},"/docs/patterns/variables","Variables",".",[208,266,268],{"id":267},"example","Example",[23,270,272],{"className":164,"code":271,"language":166,"meta":28,"style":28},"@FRONTEND\nFeature: User registration\n\n  Scenario: Register with valid data\n    Given the user goes to the \"registration\" page\n    When the user enters \"jane@example.com\" into the \"email\" field\n    And the user enters \"SecurePass123\" into the \"password\" field\n    And the user checks the \"terms\" checkbox\n    And the user clicks the \"submit\" button\n    Then the \"confirmation\" should be visible\n    And the current URL should contain \"/welcome\"\n",[18,273,274,279,284,290,295,300,305,310,315,320,325],{"__ignoreMap":28},[32,275,276],{"class":34,"line":35},[32,277,278],{},"@FRONTEND\n",[32,280,281],{"class":34,"line":46},[32,282,283],{},"Feature: User registration\n",[32,285,286],{"class":34,"line":63},[32,287,289],{"emptyLinePlaceholder":288},true,"\n",[32,291,292],{"class":34,"line":74},[32,293,294],{},"  Scenario: Register with valid data\n",[32,296,297],{"class":34,"line":86},[32,298,299],{},"    Given the user goes to the \"registration\" page\n",[32,301,302],{"class":34,"line":97},[32,303,304],{},"    When the user enters \"jane@example.com\" into the \"email\" field\n",[32,306,307],{"class":34,"line":108},[32,308,309],{},"    And the user enters \"SecurePass123\" into the \"password\" field\n",[32,311,312],{"class":34,"line":116},[32,313,314],{},"    And the user checks the \"terms\" checkbox\n",[32,316,317],{"class":34,"line":127},[32,318,319],{},"    And the user clicks the \"submit\" button\n",[32,321,322],{"class":34,"line":135},[32,323,324],{},"    Then the \"confirmation\" should be visible\n",[32,326,327],{"class":34,"line":142},[32,328,329],{},"    And the current URL should contain \"/welcome\"\n",[208,331,333],{"id":332},"step-catalog","Step catalog",[14,335,336,337,343],{},"For the full list of frontend sentences, browse the ",[222,338,339],{},[260,340,342],{"href":341},"/sentences","Step Definitions catalog"," — searchable by keyword and category.",[208,345,347],{"id":346},"next-steps","Next Steps",[349,350,351,358],"ul",{},[219,352,353,357],{},[260,354,356],{"href":355},"/docs/config/selectors","Selectors"," — How elements are resolved",[219,359,360,363],{},[260,361,20],{"href":362},"/docs/config/overview"," — Full frontend options",[365,366,367],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":28,"searchDepth":46,"depth":46,"links":369},[370,371,372,373],{"id":210,"depth":46,"text":211},{"id":267,"depth":46,"text":268},{"id":332,"depth":46,"text":333},{"id":346,"depth":46,"text":347},"Browser automation and UI testing capabilities","md",{},{"title":5},"/docs/guides/frontend-testing",{"title":5,"description":374},"docs/guides/frontend-testing","BTYCxQ18UnySaal2fsZuTB_OxlSJA_w_3nh0GjtZHY8",1781768344571]