[{"data":1,"prerenderedAt":379},["ShallowReactive",2],{"SiteFooter_cLEacilcm59lTjFJjLY6mXNWLL0ETtzOIiZwIHgDpy0":3,"doc-\u002Fdocs\u002Frecording\u002Fselectors":17,"docs-nav":245,"nav-compare":365,"editor-4zue0f":375,"editor-19gum9w":377},["Island",4],{"key":5,"result":6},"SiteFooter_cLEacilcm59lTjFJjLY6mXNWLL0ETtzOIiZwIHgDpy0",{"head":7},{"style":8},[9,11,13,15],{"innerHTML":10},".site-footer[data-v-8bb1d4ae]{border-top:1px solid var(--line);background:var(--chrome);padding:var(--sp-8) var(--gutter) var(--sp-10);gap:var(--sp-6);flex-direction:column;display:flex}.links[data-v-8bb1d4ae]{gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));max-width:62rem;display:grid}.links a[data-v-8bb1d4ae]{align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line);display:flex}.links a[data-v-8bb1d4ae]:focus-visible,.links a[data-v-8bb1d4ae]:hover{border-color:var(--line-strong)}.links[data-v-8bb1d4ae] .mark,.links[data-v-8bb1d4ae] .rf-mark{width:1.35rem;height:1.35rem;color:var(--dim);flex:none;margin-top:.1rem}.links a[data-v-8bb1d4ae]:hover .mark,.links a[data-v-8bb1d4ae]:hover .rf-mark{color:var(--red)}.links span[data-v-8bb1d4ae]{flex-direction:column;gap:2px;min-width:0;display:flex}.links b[data-v-8bb1d4ae]{font-family:var(--font-display);font-size:.85rem;font-weight:400}.links small[data-v-8bb1d4ae]{color:var(--faint);font-size:.78rem}.colophon[data-v-8bb1d4ae]{color:var(--faint);margin:0;font-size:.75rem}@supports (corner-shape:bevel){.links a[data-v-8bb1d4ae]{corner-shape:bevel}}",{"innerHTML":12},".mark[data-v-cc0d96a5]{vertical-align:-.125em;flex:none;width:1em;height:1em}",{"innerHTML":14},".mark[data-v-26f5673d]{vertical-align:-.125em;flex:none;width:1em;height:1em}",{"innerHTML":16},".rf-mark[data-v-26317b3e]{fill:currentColor;stroke:none;flex:none}",{"id":18,"title":19,"body":20,"description":235,"extension":236,"meta":237,"navigation":238,"order":239,"path":240,"section":241,"seo":242,"stem":243,"__hash__":244},"docs\u002Fdocs\u002Frecording\u002Fselectors.md","Recording selectors",{"type":21,"value":22,"toc":230},"minimark",[23,32,67,77,82,85,98,102,110,113,149,174,188,192,208,217,226],[24,25,26,27,31],"p",{},"Sometimes you need one selector, not a whole keyword. ",[28,29,30],"code",{},"Record Selector"," stops the\ntest, lets you point at the element in the browser and returns a selector for it:",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-robot shiki shiki-themes github-light github-dark","*** Test Cases ***\nFind The Login Button\n    ${selector} =    Record Selector    Login button\n    Click    ${selector}\n","robot","",[28,40,41,49,55,61],{"__ignoreMap":38},[42,43,46],"span",{"class":44,"line":45},"line",1,[42,47,48],{},"*** Test Cases ***\n",[42,50,52],{"class":44,"line":51},2,[42,53,54],{},"Find The Login Button\n",[42,56,58],{"class":44,"line":57},3,[42,59,60],{},"    ${selector} =    Record Selector    Login button\n",[42,62,64],{"class":44,"line":63},4,[42,65,66],{},"    Click    ${selector}\n",[68,69,74],"doc-video",{":controls":70,"alt":71,"poster":72,"src":73},"false","A login form with the Record Selector toolbar beside it. The pointer moves over the form; Playwright highlights each element under it. A click on the login button picks it: the toolbar shows role=button[name*=\"login\"i] and 1 match. Switching to CSS shows .loginButtonStyle; Use returns it.","\u002Fvideos\u002Frecorder\u002Floop-record-selector.jpg","\u002Fvideos\u002Frecorder\u002Floop-record-selector.mp4",[24,75,76],{},"Hover, click to pick, switch the generator, use the selector.",[78,79,81],"h2",{"id":80},"picking","Picking",[24,83,84],{},"Move the pointer over the page: Playwright highlights the element under it and\nnames it in a tooltip. A click picks it — the click does not reach the page, so\nnothing is submitted or opened. Elements in frames and in open shadow roots can be\npicked too.",[24,86,87,88,93,94,97],{},"The toolbar is the one ",[89,90,92],"a",{"href":91},"\u002Fdocs\u002Frecording\u002Ftoolbar","Record Keyword"," uses, with its\nheader showing the label you passed — ",[28,95,96],{},"Login button"," above — so you know what to pick.",[78,99,101],{"id":100},"the-selector","The selector",[103,104,107],"doc-figure",{"alt":105,"src":106},"The Record Selector toolbar for Login button: the buttons Playwright and CSS with Playwright chosen, the selector role=button[name*=\"login\"i] in colour, 1 match below it, and the buttons Highlight (an icon, switched on), Reselect and Use.","\u002Fimages\u002Frecorder\u002Fselector-picked.png",[24,108,109],{},"The picked login button, with Playwright's selector and one match on the page.",[24,111,112],{},"After the pick the toolbar shows the selector and counts the elements it finds:",[114,115,116,131],"ul",{},[117,118,119,123,124,126,127,130],"li",{},[120,121,122],"strong",{},"Playwright"," writes Playwright's own selector, the one ",[28,125,92],{}," uses:\nrole, text, label, placeholder or test id where they identify the element, in\nBrowser syntax — ",[28,128,129],{},"role=button[name*=\"login\"i]",". This is the default.",[117,132,133,136,137,140,141,144,145,148],{},[120,134,135],{},"CSS"," writes a CSS selector from ids, classes, attributes and the element's\nposition — ",[28,138,139],{},".loginButtonStyle",". Frames are joined with ",[28,142,143],{},">>>",", open shadow roots\nwith ",[28,146,147],{},">>",".",[24,150,151,152,155,156,160,161,163,164,167,168,170,171,173],{},"Switching between them keeps the picked element; start with the other one using\n",[28,153,154],{},"generator=css",". The selector is editable: shorten it, or drop a part that will\nchange, and the count below follows as you type — one match is what most keywords\nneed, several are shown as a warning, none as an error. Playwright highlights the\nmatches on the page, and follows an edit once you pause typing; the dashed square\nbefore ",[157,158,159],"em",{},"Reselect"," switches that highlight off and on. ",[157,162,159],{}," picks another\nelement, and ",[157,165,166],{},"Use"," returns what is in the field, whatever it matches. Minimized,\nthe header offers ",[157,169,159],{}," and ",[157,172,166],{}," too.",[24,175,176,177,180,181,183,184,148],{},"The same panel picks a selector in the middle of a recording: ",[157,178,179],{},"Pick"," in the\ntoolbar of ",[28,182,92],{}," adds it to the keyword as a comment — see\n",[89,185,187],{"href":186},"\u002Fdocs\u002Frecording\u002Ftoolbar#picking-a-selector","Picking a selector",[78,189,191],{"id":190},"ending","Ending",[24,193,194,196,197,200,201,204,205,148],{},[157,195,166],{}," returns the selector, and it is written to the console and the log as well.\n",[157,198,199],{},"✕"," in the header, or Escape, cancels: then the keyword fails, as it does when the\npage is closed or after five minutes without a pick or a click in the toolbar —\nchange that with ",[28,202,203],{},"idle_timeout",", or wait without limit with ",[28,206,207],{},"idle_timeout=${None}",[33,209,211],{"className":35,"code":210,"language":37,"meta":38,"style":38},"${heading} =    Record Selector    Page heading    generator=css    idle_timeout=1 minute\n",[28,212,213],{"__ignoreMap":38},[42,214,215],{"class":44,"line":45},[42,216,210],{},[24,218,219,220,222,223,225],{},"Like ",[28,221,92],{},", ",[28,224,30],{}," needs a visible browser, and it does not\nrun while a recording session is open in the same browser context.",[227,228,229],"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);}",{"title":38,"searchDepth":51,"depth":51,"links":231},[232,233,234],{"id":80,"depth":51,"text":81},{"id":100,"depth":51,"text":101},{"id":190,"depth":51,"text":191},"Pick an element in the live browser and get a selector for it — Playwright's or a CSS one, checked against the page while you edit it.","md",{},true,6,"\u002Fdocs\u002Frecording\u002Fselectors","recording",{"title":19,"description":235},"docs\u002Frecording\u002Fselectors","DcUcyAf4em85AF8EZBmu7Cz_L9cwP_37mOt2suFDnbM",[246,252,256,260,264,268,272,277,281,285,289,293,297,302,306,310,314,319,323,327,331,335,339,344,348,349,352,356,361],{"path":247,"title":248,"description":249,"section":250,"order":251},"\u002Fdocs\u002Fconcepts\u002Farchitecture","How Browser works","Python, a Node process and Playwright — what runs where, and where the files land.","concepts",5,{"path":253,"title":254,"description":255,"section":250,"order":57},"\u002Fdocs\u002Fconcepts\u002Fassertions","Assertions","Almost every getter can assert, every assertion retries, and each return type allows different operators. The complete AssertionEngine reference.",{"path":257,"title":258,"description":259,"section":250,"order":45},"\u002Fdocs\u002Fconcepts\u002Fbrowser-context-page","Browser, context and page","The three layers Playwright is built on — and why a new context is the cheapest clean slate you will ever get.",{"path":261,"title":262,"description":263,"section":250,"order":239},"\u002Fdocs\u002Fconcepts\u002Flogging","Logging and debugging","Four places Browser tells you what happened — log.html, the Playwright log, traces and coverage.",{"path":265,"title":266,"description":267,"section":250,"order":51},"\u002Fdocs\u002Fconcepts\u002Fselectors","Finding elements","Which selector strategy to reach for, why the order matters, and how to chain across iframes and shadow DOM.",{"path":269,"title":270,"description":271,"section":250,"order":63},"\u002Fdocs\u002Fconcepts\u002Fwaiting","Waiting and promises","Most waiting is already done for you. This is the rest of it — Wait For Condition, and how to run keywords in parallel with Promise To.",{"path":273,"title":274,"description":275,"section":276,"order":251},"\u002Fdocs\u002Fextending\u002Fbrowser-as-a-base","Browser as a base","Own the Browser instance in your own library — what you get free, what one line restores, and what you build yourself.","extending",{"path":278,"title":279,"description":280,"section":276,"order":51},"\u002Fdocs\u002Fextending\u002Fjavascript-basics","Just enough JavaScript","The JavaScript you need to write extensions and Evaluate JavaScript, for people who write Python.",{"path":282,"title":283,"description":284,"section":276,"order":57},"\u002Fdocs\u002Fextending\u002Fjavascript-extensions","JavaScript extensions","Add keywords that run on the Node side with full Playwright access — and attach a debugger to them.",{"path":286,"title":287,"description":288,"section":276,"order":63},"\u002Fdocs\u002Fextending\u002Fpython-libraries","Your own Python library","Move business logic out of Robot Framework and keep Browser exactly as it is.",{"path":290,"title":291,"description":292,"section":276,"order":45},"\u002Fdocs\u002Fextending\u002Fpython-plugins","Python plugins","Add or replace keywords from Python, with access to the library's own API and to the Node side.",{"path":294,"title":295,"description":296,"section":276,"order":239},"\u002Fdocs\u002Fextending\u002Ftranslations","Translating keywords","Using a translation package to get keyword names and documentation in your language, and writing one for a language nobody has covered yet.",{"path":298,"title":299,"description":300,"section":301,"order":63},"\u002Fdocs\u002Fmobile\u002Fdevice-list","Every device descriptor","The full list of names Get Device accepts, with the viewport, pixel ratio, touch and engine each one sets — filterable and sortable.","mobile",{"path":303,"title":304,"description":305,"section":301,"order":51},"\u002Fdocs\u002Fmobile\u002Fdevices","Emulating a device","Device descriptors, what the six or seven properties they set actually change, and the one that emulation cannot give you.",{"path":307,"title":308,"description":309,"section":301,"order":45},"\u002Fdocs\u002Fmobile\u002Fresponsive","Testing responsive pages","Why a browser at a phone-sized viewport tests responsiveness properly, what emulation cannot tell you, and where real devices actually belong.",{"path":311,"title":312,"description":313,"section":301,"order":57},"\u002Fdocs\u002Fmobile\u002Ftouch","Touch, permissions and location","Tap and why it needs hasTouch, granting camera or notifications without a dialog, faking where the user is, and the gestures Browser has no keyword for.",{"path":315,"title":316,"description":317,"section":318,"order":57},"\u002Fdocs\u002Foperations\u002Fdocker","Running in Docker","The published Browser image, the four docker run flags that matter, and why running as root breaks Chromium.","operations",{"path":320,"title":321,"description":322,"section":318,"order":63},"\u002Fdocs\u002Foperations\u002Fdocker-images","Building your own image","Extending the published image with your dependencies, the version lock between Browser and Playwright, and using it as a CI job container.",{"path":324,"title":325,"description":326,"section":318,"order":51},"\u002Fdocs\u002Foperations\u002Fenvironment-variables","Environment variables","The variables that change how Browser behaves, which of them are safe in production, and the import parameters that should usually be preferred.",{"path":328,"title":329,"description":330,"section":318,"order":45},"\u002Fdocs\u002Foperations\u002Fnode-process","The Node process","Browser starts a Node process to talk to Playwright. What that costs, how to share one across parallel runs, and how to pass it Node flags.",{"path":332,"title":333,"description":334,"section":241,"order":57},"\u002Fdocs\u002Frecording\u002Farguments","Keyword arguments","Turn a recorded value, part of it or part of a selector into an argument while you record — with or without a default, and everywhere it occurs.",{"path":336,"title":337,"description":338,"section":241,"order":251},"\u002Fdocs\u002Frecording\u002Ffiles","Where recorded keywords go","The suite file, a resource file or only the log; written live after every action; what the recorder changes in a file and what it never touches.",{"path":340,"title":341,"description":342,"section":241,"order":343},"\u002Fdocs\u002Frecording\u002Fpractice","Good practice and limits","How to record keywords worth keeping, what to check before you commit one, what the recorder cannot do, and what to do when it goes wrong.",7,{"path":345,"title":346,"description":347,"section":241,"order":45},"\u002Fdocs\u002Frecording\u002Frecord-keywords","Recording keywords","Click through the page and get a reusable user keyword, written into your suite while you work. Record Keyword and Record Keywords in five minutes.",{"path":240,"title":19,"description":235,"section":241,"order":239},{"path":91,"title":350,"description":351,"section":241,"order":51},"The recorder toolbar","Name and start keywords, save, undo and discard them, end the session, and keep the toolbar out of the page's way.",{"path":353,"title":354,"description":355,"section":241,"order":63},"\u002Fdocs\u002Frecording\u002Fwhat-gets-recorded","What gets recorded","Which Browser keyword each action becomes, how popups, dialogs, downloads and uploads are handled, recording assertions, and the selectors the recorder writes.",{"path":357,"title":358,"description":359,"section":360,"order":51},"\u002Fdocs\u002Fstart\u002Fgetting-started","Getting started","Install Browser, write a first test, and run it.","start",{"path":362,"title":363,"description":364,"section":360,"order":45},"\u002Fdocs\u002Fstart\u002Finstallation","Installation","The two ways to install Browser — with a bundled Node.js runtime, or with one you provide yourself — and how to upgrade and remove each.",[366,369,372],{"to":367,"label":368},"\u002Fwhy\u002Fvs-cypress","vs Cypress",{"to":370,"label":371},"\u002Fwhy\u002Fvs-playwright","vs Playwright Test",{"to":373,"label":374},"\u002Fwhy\u002Fvs-seleniumlibrary","vs SeleniumLibrary",[376],"\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E;font-weight:bold\">*** Test Cases ***\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">Find The Login Button\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">selector\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#FF6B5E\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#2BD9CC\">    Record Selector\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    Login button\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    Click\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">selector\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>",[378],"\u003Cspan class=\"line\">\u003Cspan style=\"color:#96A2A8;font-style:italic\">${heading} =    Record Selector    Page heading    generator=css    idle_timeout=1 minute\u003C\u002Fspan>\u003C\u002Fspan>",1793560509104]