[{"data":1,"prerenderedAt":528},["ShallowReactive",2],{"SiteFooter_cLEacilcm59lTjFJjLY6mXNWLL0ETtzOIiZwIHgDpy0":3,"doc-\u002Fdocs\u002Fmobile\u002Fresponsive":17,"docs-nav":440,"nav-compare":510,"editor-12e8l5a":520,"editor-1pq3kpr":522,"editor-seuowy":524,"editor-gm8hny":526},["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-bottom:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);border: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":432,"extension":433,"meta":434,"navigation":263,"order":127,"path":435,"section":436,"seo":437,"stem":438,"__hash__":439},"docs\u002Fdocs\u002Fmobile\u002Fresponsive.md","Testing responsive pages",{"type":21,"value":22,"toc":425},"minimark",[23,27,30,35,38,41,60,68,73,80,90,94,114,161,164,172,197,215,219,222,229,350,353,357,360,389,396,400,421],[24,25,26],"p",{},"Your page has to work on a phone. That is not a separate application, it is the\nsame application at a different width — and a browser at that width is a\nfaithful test of it.",[24,28,29],{},"This chapter is about testing that in automation: viewports, device descriptors,\ntouch, permissions and location. It starts with the part people get wrong, which\nis deciding what needs a real device.",[31,32,34],"h2",{"id":33},"emulation-is-enough-until-it-is-not","Emulation is enough, until it is not",[24,36,37],{},"A responsive layout is CSS reacting to viewport width, and occasionally to\npointer type and device pixel ratio. All of those are inputs you can set. When\nyou set them, the browser lays the page out exactly as it would on the device —\nbecause it is the same layout engine doing the same work.",[24,39,40],{},"So these are properly testable in automation, and cheaply:",[42,43,44,48,51,54,57],"ul",{},[45,46,47],"li",{},"Does the navigation collapse into a menu below the breakpoint?",[45,49,50],{},"Does the table become cards, or does it scroll sideways off the screen?",[45,52,53],{},"Is the primary action still reachable without scrolling?",[45,55,56],{},"Do tap targets keep a sane size?",[45,58,59],{},"Does anything overflow horizontally? (This one is worth asserting on every\npage you have.)",[24,61,62,63,67],{},"And these are ",[64,65,66],"strong",{},"not"," things emulation can tell you:",[69,70],"doc-table",{":head":71,":rows":72},"[\"Emulation cannot judge\",\"Because\"]","[[\"Whether it feels fast on a four-year-old phone\",\"Your CI machine is not that phone. CPU throttling approximates it; it does not reproduce it.\"],[\"Whether the on-screen keyboard covers the field you just focused\",\"There is no on-screen keyboard.\"],[\"Whether the thumb can actually reach the button\",\"Ergonomics are physical.\"],[\"Whether Safari on iOS 17.2 has a bug\",\"WebKit is the same engine, not the same browser build.\"],[\"Whether the page is legible outdoors\",\"Screens and eyes are involved.\"]]",[24,74,75,76,79],{},"That list is the case for real devices, and it is a real case. Note what it has\nin common: ",[64,77,78],{},"every item is a human judgement."," Which is exactly why it belongs\nin manual exploratory testing on real hardware, done by people, and not in an\nautomated suite pretending to be a person.",[81,82,83],"doc-note",{},[24,84,85,86,89],{},"Our position, stated plainly: ",[64,87,88],{},"test responsiveness in automation with\nemulation, and test the experience on real devices with real humans."," A device\nfarm running the same assertions your CI already runs is an expensive way to\nlearn the same thing twice.",[31,91,93],{"id":92},"the-viewport-is-the-input","The viewport is the input",[24,95,96,97,100,101,105,106,109,110,113],{},"Browser's default viewport is ",[64,98,99],{},"1280×720",". Every context can have its own, and\nit is the main lever — ",[102,103,104],"code",{},"deviceScaleFactor",", ",[102,107,108],{},"isMobile"," and ",[102,111,112],{},"hasTouch"," sit\nalongside it on the same keyword.",[115,116,121],"pre",{"className":117,"code":118,"language":119,"meta":120,"style":120},"language-robot shiki shiki-themes github-light github-dark","*** Test Cases ***\nNavigation Collapses On A Phone\n    New Context    viewport={'width': 390, 'height': 844}\n    New Page    ${URL}\n    Get Element States    id=menu-button    contains    visible\n    Get Element States    nav.desktop        contains    hidden    attached\n","robot","",[102,122,123,131,137,143,149,155],{"__ignoreMap":120},[124,125,128],"span",{"class":126,"line":127},"line",1,[124,129,130],{},"*** Test Cases ***\n",[124,132,134],{"class":126,"line":133},2,[124,135,136],{},"Navigation Collapses On A Phone\n",[124,138,140],{"class":126,"line":139},3,[124,141,142],{},"    New Context    viewport={'width': 390, 'height': 844}\n",[124,144,146],{"class":126,"line":145},4,[124,147,148],{},"    New Page    ${URL}\n",[124,150,152],{"class":126,"line":151},5,[124,153,154],{},"    Get Element States    id=menu-button    contains    visible\n",[124,156,158],{"class":126,"line":157},6,[124,159,160],{},"    Get Element States    nav.desktop        contains    hidden    attached\n",[24,162,163],{},"Contexts are cheap — a fresh, isolated profile, far cheaper than a new browser — so a viewport\nper context is the natural unit. Nothing leaks between them: no cookies, no\nstorage, no permissions.",[24,165,166,167,171],{},"To change the size ",[168,169,170],"em",{},"within"," a test, for instance to watch a layout cross a\nbreakpoint, set it on the page instead:",[115,173,175],{"className":117,"code":174,"language":119,"meta":120,"style":120},"Set Viewport Size    1200    800\nGet Element States    nav.desktop    contains    visible\nSet Viewport Size    380     800\nGet Element States    nav.desktop    contains    hidden\n",[102,176,177,182,187,192],{"__ignoreMap":120},[124,178,179],{"class":126,"line":127},[124,180,181],{},"Set Viewport Size    1200    800\n",[124,183,184],{"class":126,"line":133},[124,185,186],{},"Get Element States    nav.desktop    contains    visible\n",[124,188,189],{"class":126,"line":139},[124,190,191],{},"Set Viewport Size    380     800\n",[124,193,194],{"class":126,"line":145},[124,195,196],{},"Get Element States    nav.desktop    contains    hidden\n",[81,198,200],{"kind":199},"warning",[24,201,202,205,206,208,209,214],{},[102,203,204],{},"Set Viewport Size"," changes the page's viewport, not the emulated device. A page that renders\ndifferently because of ",[102,207,108],{}," or touch support will not change just because\nyou made the viewport narrow. For that you want a device descriptor —\n",[210,211,213],"a",{"href":212},"\u002Fdocs\u002Fmobile\u002Fdevices","Emulating a device",".",[31,216,218],{"id":217},"test-the-breakpoints-not-the-phones","Test the breakpoints, not the phones",[24,220,221],{},"The temptation is to write one test per popular handset. Resist it: you end up\nwith fifteen tests that all exercise the same three CSS rules, and they go stale\nevery time a manufacturer changes a screen.",[24,223,224,225,228],{},"Your CSS has breakpoints. Those are the real boundaries, and there are usually\nthree or four of them. Test ",[64,226,227],{},"either side of each",", and name the tests after\nthe layout rather than the hardware:",[115,230,232],{"className":117,"code":231,"language":119,"meta":120,"style":120},"*** Variables ***\n&{LAYOUTS}\n...    phone=380\n...    tablet=800\n...    desktop=1280\n\n\n*** Test Cases ***\nPrimary Action Is Reachable\n    [Template]    Check Primary Action\n    FOR    ${name}    ${width}    IN    &{LAYOUTS}\n        ${name}    ${width}\n    END\n\n\n*** Keywords ***\nCheck Primary Action\n    [Arguments]    ${name}    ${width}\n    New Context    viewport={'width': ${width}, 'height': 900}\n    New Page    ${URL}\n    Get Element States    id=checkout    contains    visible\n",[102,233,234,239,244,249,254,259,265,270,275,281,287,293,299,305,310,315,321,327,333,339,344],{"__ignoreMap":120},[124,235,236],{"class":126,"line":127},[124,237,238],{},"*** Variables ***\n",[124,240,241],{"class":126,"line":133},[124,242,243],{},"&{LAYOUTS}\n",[124,245,246],{"class":126,"line":139},[124,247,248],{},"...    phone=380\n",[124,250,251],{"class":126,"line":145},[124,252,253],{},"...    tablet=800\n",[124,255,256],{"class":126,"line":151},[124,257,258],{},"...    desktop=1280\n",[124,260,261],{"class":126,"line":157},[124,262,264],{"emptyLinePlaceholder":263},true,"\n",[124,266,268],{"class":126,"line":267},7,[124,269,264],{"emptyLinePlaceholder":263},[124,271,273],{"class":126,"line":272},8,[124,274,130],{},[124,276,278],{"class":126,"line":277},9,[124,279,280],{},"Primary Action Is Reachable\n",[124,282,284],{"class":126,"line":283},10,[124,285,286],{},"    [Template]    Check Primary Action\n",[124,288,290],{"class":126,"line":289},11,[124,291,292],{},"    FOR    ${name}    ${width}    IN    &{LAYOUTS}\n",[124,294,296],{"class":126,"line":295},12,[124,297,298],{},"        ${name}    ${width}\n",[124,300,302],{"class":126,"line":301},13,[124,303,304],{},"    END\n",[124,306,308],{"class":126,"line":307},14,[124,309,264],{"emptyLinePlaceholder":263},[124,311,313],{"class":126,"line":312},15,[124,314,264],{"emptyLinePlaceholder":263},[124,316,318],{"class":126,"line":317},16,[124,319,320],{},"*** Keywords ***\n",[124,322,324],{"class":126,"line":323},17,[124,325,326],{},"Check Primary Action\n",[124,328,330],{"class":126,"line":329},18,[124,331,332],{},"    [Arguments]    ${name}    ${width}\n",[124,334,336],{"class":126,"line":335},19,[124,337,338],{},"    New Context    viewport={'width': ${width}, 'height': 900}\n",[124,340,342],{"class":126,"line":341},20,[124,343,148],{},[124,345,347],{"class":126,"line":346},21,[124,348,349],{},"    Get Element States    id=checkout    contains    visible\n",[24,351,352],{},"When a test fails, \"the checkout button is hidden at tablet width\" locates the\nbug. \"It failed on the Galaxy S21\" does not.",[31,354,356],{"id":355},"the-assertion-worth-having-everywhere","The assertion worth having everywhere",[24,358,359],{},"Horizontal overflow is the most common responsive defect, one of the most\nannoying, and trivially detectable — an element wider than the viewport makes\nthe whole page scroll sideways:",[115,361,363],{"className":117,"code":362,"language":119,"meta":120,"style":120},"*** Keywords ***\nPage Should Not Scroll Sideways\n    ${overflow} =    Evaluate JavaScript    ${None}\n    ...    () => document.documentElement.scrollWidth > document.documentElement.clientWidth\n    Should Not Be True    ${overflow}    Page scrolls horizontally\n",[102,364,365,369,374,379,384],{"__ignoreMap":120},[124,366,367],{"class":126,"line":127},[124,368,320],{},[124,370,371],{"class":126,"line":133},[124,372,373],{},"Page Should Not Scroll Sideways\n",[124,375,376],{"class":126,"line":139},[124,377,378],{},"    ${overflow} =    Evaluate JavaScript    ${None}\n",[124,380,381],{"class":126,"line":145},[124,382,383],{},"    ...    () => document.documentElement.scrollWidth > document.documentElement.clientWidth\n",[124,385,386],{"class":126,"line":151},[124,387,388],{},"    Should Not Be True    ${overflow}    Page scrolls horizontally\n",[24,390,391,392,395],{},"Call it after loading each page at your narrowest layout. It costs nothing and\nit catches the long unbreakable string, the fixed-width table and the image\nwithout ",[102,393,394],{},"max-width"," — every time, before anyone has to notice it by hand.",[31,397,399],{"id":398},"where-to-go-next","Where to go next",[42,401,402,410],{},[45,403,404,406,407,409],{},[210,405,213],{"href":212}," — descriptors, ",[102,408,108],{},",\npixel ratio, and what emulation actually changes.",[45,411,412,416,417,420],{},[210,413,415],{"href":414},"\u002Fdocs\u002Fmobile\u002Ftouch","Touch, permissions and location"," — ",[102,418,419],{},"Tap",", granting\ncamera or notifications, and faking where the user is.",[422,423,424],"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":120,"searchDepth":133,"depth":133,"links":426},[427,428,429,430,431],{"id":33,"depth":133,"text":34},{"id":92,"depth":133,"text":93},{"id":217,"depth":133,"text":218},{"id":355,"depth":133,"text":356},{"id":398,"depth":133,"text":399},"Why a browser at a phone-sized viewport tests responsiveness properly, what emulation cannot tell you, and where real devices actually belong.","md",{},"\u002Fdocs\u002Fmobile\u002Fresponsive","mobile",{"title":19,"description":432},"docs\u002Fmobile\u002Fresponsive","bjdmRQaNP9M6rebzCen1w_-1yRoWoV_elkGCIlTvRVU",[441,446,450,454,458,462,466,471,475,479,483,485,486,488,493,497,501,505],{"path":442,"title":443,"description":444,"section":445,"order":151},"\u002Fdocs\u002Fconcepts\u002Farchitecture","How Browser works","Python, a Node process and Playwright — what runs where, and which installation to choose.","concepts",{"path":447,"title":448,"description":449,"section":445,"order":139},"\u002Fdocs\u002Fconcepts\u002Fassertions","Assertions","Almost every getter can assert, every assertion retries, and each return type allows different operators. The complete AssertionEngine reference.",{"path":451,"title":452,"description":453,"section":445,"order":127},"\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":455,"title":456,"description":457,"section":445,"order":157},"\u002Fdocs\u002Fconcepts\u002Flogging","Logging and debugging","Four places Browser tells you what happened — log.html, the Playwright log, traces and coverage.",{"path":459,"title":460,"description":461,"section":445,"order":133},"\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":463,"title":464,"description":465,"section":445,"order":145},"\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":467,"title":468,"description":469,"section":470,"order":133},"\u002Fdocs\u002Fextending\u002Fjavascript-basics","Just enough JavaScript","The JavaScript you need to write extensions and Evaluate JavaScript, for people who write Python.","extending",{"path":472,"title":473,"description":474,"section":470,"order":139},"\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":476,"title":477,"description":478,"section":470,"order":127},"\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":480,"title":481,"description":482,"section":470,"order":145},"\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":212,"title":213,"description":484,"section":436,"order":133},"Device descriptors, what the six or seven properties they set actually change, and the one that emulation cannot give you.",{"path":435,"title":19,"description":432,"section":436,"order":127},{"path":414,"title":415,"description":487,"section":436,"order":139},"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":489,"title":490,"description":491,"section":492,"order":139},"\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":494,"title":495,"description":496,"section":492,"order":145},"\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":498,"title":499,"description":500,"section":492,"order":133},"\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":502,"title":503,"description":504,"section":492,"order":127},"\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":506,"title":507,"description":508,"section":509,"order":127},"\u002Fdocs\u002Fstart\u002Fgetting-started","Getting started","Install Browser, write a first test, and run it.","start",[511,514,517],{"to":512,"label":513},"\u002Fwhy\u002Fvs-cypress","vs Cypress",{"to":515,"label":516},"\u002Fwhy\u002Fvs-playwright","vs Playwright Test",{"to":518,"label":519},"\u002Fwhy\u002Fvs-seleniumlibrary","vs SeleniumLibrary",[521],"\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E;font-weight:bold\">*** Test Cases ***\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">Navigation Collapses On A Phone\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    New Context\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    viewport={'width': 390, 'height': 844}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    New Page\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">URL\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    Get Element States\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    id=menu-button\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    contains\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    visible\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    Get Element States\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    nav.desktop\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">        contains\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    hidden\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    attached\u003C\u002Fspan>\u003C\u002Fspan>",[523],"\u003Cspan class=\"line\">\u003Cspan style=\"color:#96A2A8;font-style:italic\">Set Viewport Size    1200    800\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#96A2A8;font-style:italic\">Get Element States    nav.desktop    contains    visible\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#96A2A8;font-style:italic\">Set Viewport Size    380     800\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#96A2A8;font-style:italic\">Get Element States    nav.desktop    contains    hidden\u003C\u002Fspan>\u003C\u002Fspan>",[525],"\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E;font-weight:bold\">*** Variables ***\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A9B4BA\">&{\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">LAYOUTS\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E\">...\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    phone=380\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E\">...\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    tablet=800\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E\">...\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    desktop=1280\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003C\u002Fspan>\u003Cspan class=\"line\">\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E;font-weight:bold\">*** Test Cases ***\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">Primary Action Is Reachable\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#C9A6E9\">    [Template]\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    Check Primary Action\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#C9A6E9\">    FOR\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">name\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">width\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    IN\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    &{\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">LAYOUTS\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A9B4BA\">        ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">name\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">width\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#C9A6E9\">    END\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003C\u002Fspan>\u003Cspan class=\"line\">\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E;font-weight:bold\">*** Keywords ***\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">Check Primary Action\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#C9A6E9\">    [Arguments]\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">name\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">width\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    New Context\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    viewport={'width': \u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">width\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">, 'height': 900}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    New Page\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">URL\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    Get Element States\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    id=checkout\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    contains\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    visible\u003C\u002Fspan>\u003C\u002Fspan>",[527],"\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E;font-weight:bold\">*** Keywords ***\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">Page Should Not Scroll Sideways\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">overflow\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#FF6B5E\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#2BD9CC\">    Evaluate JavaScript\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">None\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#FF6B5E\">    ...\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    () => document.documentElement.scrollWidth > document.documentElement.clientWidth\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan style=\"color:#2BD9CC\">    Should Not Be True\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">    ${\u003C\u002Fspan>\u003Cspan style=\"color:#FFB86B\">overflow\u003C\u002Fspan>\u003Cspan style=\"color:#A9B4BA\">}\u003C\u002Fspan>\u003Cspan style=\"color:#E0D3A3\">    Page scrolls horizontally\u003C\u002Fspan>\u003C\u002Fspan>",1786734138736]