[{"data":1,"prerenderedAt":452},["ShallowReactive",2],{"docs-/docs/config/selectors":3},{"id":4,"title":5,"body":6,"description":444,"extension":445,"meta":446,"navigation":447,"path":448,"seo":449,"stem":450,"__hash__":451},"docs/docs/config/selectors.md","Selectors",{"type":7,"value":8,"toc":437},"minimark",[9,13,22,38,105,110,121,210,214,284,291,295,347,353,357,360,377,380,400,411,415,433],[10,11,5],"h1",{"id":12},"selectors",[14,15,16,17,21],"p",{},"Steps reference elements by name — TestFlowKit looks up the selector in ",[18,19,20],"code",{},"testflowkit.yml"," and tries each fallback until one matches.",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-gherkin shiki shiki-themes github-light github-dark","When the user clicks the \"submit_button\" button\n","gherkin","",[18,30,31],{"__ignoreMap":28},[32,33,36],"span",{"class":34,"line":35},"line",1,[32,37,26],{},[23,39,43],{"className":40,"code":41,"language":42,"meta":28,"style":28},"language-yaml shiki shiki-themes github-light github-dark","frontend:\n  elements:\n    login:\n      submit_button:\n        - \"[data-testid='submit']\"\n        - \"#submit-btn\"\n        - \"button[type='submit']\"\n","yaml",[18,44,45,55,63,71,79,89,97],{"__ignoreMap":28},[32,46,47,51],{"class":34,"line":35},[32,48,50],{"class":49},"s9eBZ","frontend",[32,52,54],{"class":53},"sVt8B",":\n",[32,56,58,61],{"class":34,"line":57},2,[32,59,60],{"class":49},"  elements",[32,62,54],{"class":53},[32,64,66,69],{"class":34,"line":65},3,[32,67,68],{"class":49},"    login",[32,70,54],{"class":53},[32,72,74,77],{"class":34,"line":73},4,[32,75,76],{"class":49},"      submit_button",[32,78,54],{"class":53},[32,80,82,85],{"class":34,"line":81},5,[32,83,84],{"class":53},"        - ",[32,86,88],{"class":87},"sZZnC","\"[data-testid='submit']\"\n",[32,90,92,94],{"class":34,"line":91},6,[32,93,84],{"class":53},[32,95,96],{"class":87},"\"#submit-btn\"\n",[32,98,100,102],{"class":34,"line":99},7,[32,101,84],{"class":53},[32,103,104],{"class":87},"\"button[type='submit']\"\n",[106,107,109],"h2",{"id":108},"defining-elements","Defining elements",[14,111,112,113,116,117,120],{},"Group by page name (matching ",[18,114,115],{},"pages",") or use ",[18,118,119],{},"common"," for shared elements:",[23,122,124],{"className":40,"code":123,"language":42,"meta":28,"style":28},"frontend:\n  pages:\n    login: \"/login\"\n  elements:\n    common:\n      header: \"#main-header\"\n    login:\n      email_field: \"#email\"\n      submit_button:\n        - \"[data-testid='submit']\"\n        - \"#submit-btn\"\n",[18,125,126,132,139,149,155,162,172,178,189,196,203],{"__ignoreMap":28},[32,127,128,130],{"class":34,"line":35},[32,129,50],{"class":49},[32,131,54],{"class":53},[32,133,134,137],{"class":34,"line":57},[32,135,136],{"class":49},"  pages",[32,138,54],{"class":53},[32,140,141,143,146],{"class":34,"line":65},[32,142,68],{"class":49},[32,144,145],{"class":53},": ",[32,147,148],{"class":87},"\"/login\"\n",[32,150,151,153],{"class":34,"line":73},[32,152,60],{"class":49},[32,154,54],{"class":53},[32,156,157,160],{"class":34,"line":81},[32,158,159],{"class":49},"    common",[32,161,54],{"class":53},[32,163,164,167,169],{"class":34,"line":91},[32,165,166],{"class":49},"      header",[32,168,145],{"class":53},[32,170,171],{"class":87},"\"#main-header\"\n",[32,173,174,176],{"class":34,"line":99},[32,175,68],{"class":49},[32,177,54],{"class":53},[32,179,181,184,186],{"class":34,"line":180},8,[32,182,183],{"class":49},"      email_field",[32,185,145],{"class":53},[32,187,188],{"class":87},"\"#email\"\n",[32,190,192,194],{"class":34,"line":191},9,[32,193,76],{"class":49},[32,195,54],{"class":53},[32,197,199,201],{"class":34,"line":198},10,[32,200,84],{"class":53},[32,202,88],{"class":87},[32,204,206,208],{"class":34,"line":205},11,[32,207,84],{"class":53},[32,209,96],{"class":87},[106,211,213],{"id":212},"selector-types","Selector types",[215,216,217,230],"table",{},[218,219,220],"thead",{},[221,222,223,227],"tr",{},[224,225,226],"th",{},"Type",[224,228,229],{},"Example",[231,232,233,244,254,264,274],"tbody",{},[221,234,235,239],{},[236,237,238],"td",{},"CSS ID",[236,240,241],{},[18,242,243],{},"#email",[221,245,246,249],{},[236,247,248],{},"CSS class",[236,250,251],{},[18,252,253],{},".btn-primary",[221,255,256,259],{},[236,257,258],{},"Data attribute",[236,260,261],{},[18,262,263],{},"[data-testid='login']",[221,265,266,269],{},[236,267,268],{},"Attribute",[236,270,271],{},[18,272,273],{},"[name='email']",[221,275,276,279],{},[236,277,278],{},"XPath",[236,280,281],{},[18,282,283],{},"xpath://button[contains(text(), 'Submit')]",[14,285,286,287,290],{},"Prefer CSS over XPath when possible. Prefix XPath selectors with ",[18,288,289],{},"xpath:",".",[106,292,294],{"id":293},"best-practices","Best practices",[215,296,297,307],{},[218,298,299],{},[221,300,301,304],{},[224,302,303],{},"Do",[224,305,306],{},"Don't",[231,308,309,324,332],{},[221,310,311,318],{},[236,312,313,314,317],{},"Use ",[18,315,316],{},"data-testid"," attributes",[236,319,320,321],{},"Rely on deep DOM paths like ",[18,322,323],{},"div > div:nth-child(3) > button",[221,325,326,329],{},[236,327,328],{},"List fallbacks most-reliable first",[236,330,331],{},"Use a single brittle selector",[221,333,334,341],{},[236,335,336,337,340],{},"Use semantic names (",[18,338,339],{},"submit_button",")",[236,342,343,344,340],{},"Use generic names (",[18,345,346],{},"btn1",[14,348,349,350,352],{},"Work with developers to add ",[18,351,316],{}," to key interactive elements.",[106,354,356],{"id":355},"debugging","Debugging",[14,358,359],{},"Test selectors in browser DevTools:",[23,361,365],{"className":362,"code":363,"language":364,"meta":28,"style":28},"language-javascript shiki shiki-themes github-light github-dark","document.querySelector('#my-element')       // CSS\n$x(\"//button[text()='Submit']\")           // XPath\n","javascript",[18,366,367,372],{"__ignoreMap":28},[32,368,369],{"class":34,"line":35},[32,370,371],{},"document.querySelector('#my-element')       // CSS\n",[32,373,374],{"class":34,"line":57},[32,375,376],{},"$x(\"//button[text()='Submit']\")           // XPath\n",[14,378,379],{},"Run with debug output to see which selector matched:",[23,381,385],{"className":382,"code":383,"language":384,"meta":28,"style":28},"language-bash shiki shiki-themes github-light github-dark","tkit run --debug\n","bash",[18,386,387],{"__ignoreMap":28},[32,388,389,393,396],{"class":34,"line":35},[32,390,392],{"class":391},"sScJk","tkit",[32,394,395],{"class":87}," run",[32,397,399],{"class":398},"sj4cs"," --debug\n",[14,401,402,403,406,407,410],{},"Increase ",[18,404,405],{},"frontend.default_timeout"," or ",[18,408,409],{},"settings.think_time"," if elements load slowly.",[106,412,414],{"id":413},"next-steps","Next Steps",[416,417,418,427],"ul",{},[419,420,421,426],"li",{},[422,423,425],"a",{"href":424},"/docs/guides/frontend-testing","Frontend Testing"," — UI testing guide",[419,428,429,432],{},[422,430,20],{"href":431},"/docs/config/overview"," — Full frontend config",[434,435,436],"style",{},"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);}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":28,"searchDepth":57,"depth":57,"links":438},[439,440,441,442,443],{"id":108,"depth":57,"text":109},{"id":212,"depth":57,"text":213},{"id":293,"depth":57,"text":294},{"id":355,"depth":57,"text":356},{"id":413,"depth":57,"text":414},"Learn how TestFlowKit finds and interacts with elements on web pages","md",{},{"title":5},"/docs/config/selectors",{"title":5,"description":444},"docs/config/selectors","71pQD8NCaX0099LIbjEmBtovqwpKO1pDftsKxQ_uZ4c",1781768344594]