CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>Laravel Dusk - Laravel 12.x - The PHP Framework For Web Artisans</title> <link rel="canonical" href="https://laravel.com/docs/12.x/dusk">  <meta name="title" content="Laravel Dusk - Laravel 12.x - The PHP Framework For Web Artisans"> <meta name="description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.">  <meta property="og:type" content="website"> <meta property="og:url" content="https://laravel.com/"> <meta property="og:title" content="Laravel Dusk - Laravel 12.x - The PHP Framework For Web Artisans"> <meta property="og:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="og:image" content="https://laravel.com/images/og/laravel-docs-12.png">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://laravel.com/"> <meta property="twitter:title" content="Laravel Dusk - Laravel 12.x - The PHP Framework For Web Artisans"> <meta property="twitter:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="twitter:image" content="https://laravel.com/images/og/laravel-docs-12.png">  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> <link rel="manifest" href="/img/favicon/site.webmanifest"> <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#ff2d20"> <link rel="shortcut icon" href="/img/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#ff2d20"> <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <meta name="color-scheme" content="light"> <link rel="preload" href="/fonts/InstrumentSans.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preconnect" href="https://E3MIRNPJH5-dsn.algolia.net" crossorigin /> <link rel="preload" as="style" href="https://laravel.com/build/assets/app-DTuzKHzc.css" /><link rel="modulepreload" href="https://laravel.com/build/assets/app-DsFpo0m6.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/mediaQuery-Bm25Hv93.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/module.esm-BKQTc33J.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/docs-Ch76ti3c.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/theme-switcher-CvREX8Sp.js" /><link rel="stylesheet" href="https://laravel.com/build/assets/app-DTuzKHzc.css" /><script type="module" src="https://laravel.com/build/assets/app-DsFpo0m6.js"></script><script type="module" src="https://laravel.com/build/assets/docs-Ch76ti3c.js"></script>  <script src="https://cdn.usefathom.com/script.js" data-site="DVMEKBYF" defer></script>   <script async src="https://tag.clearbitscripts.com/v1/pk_97d2bf69f817feb07be42fcda1460119/tags.js" referrerpolicy="strict-origin-when-cross-origin"></script> <script> const alwaysLightMode = false; const algolia_app_id = 'E3MIRNPJH5'; const algolia_search_key = '1fa3a8fec06eb1858d6ca137211225c0'; const version = '12.x'; if (!alwaysLightMode) { if (localStorage.theme === 'dark' || (localStorage.theme === 'system' && window.matchMedia("(prefers-color-scheme: dark)").matches)) { document.documentElement.classList.add("dark"); document.documentElement.setAttribute("data-theme", "dark"); document.documentElement.setAttribute("color-theme", "dark"); } } </script> <script> document.addEventListener('DOMContentLoaded', function () { // Set a CSS variable for the viewport width for the divider component document.documentElement.style.setProperty('--viewport-width', (document.body.clientWidth || 0)+'px'); }); window.addEventListener('resize', function () { document.documentElement.style.setProperty('--viewport-width', (document.body.clientWidth || 0)+'px'); }, { passive: true }); </script> </head> <body class="font-sans antialiased text-sand-light-12 bg-sand-light-1 dark:bg-sand-dark-1"> <div class="xl:px-0 mx-auto xl:max-w-[1400px] w-full max-w-full"> <div class="relative xl:border-l xl:mx-auto bg-sand-light-1 dark:bg-sand-dark-1 xl:border-sand-light-7 xl:dark:border-sand-dark-6"> <div id="nav-trigger" class="absolute left-0 top-32"></div> <nav class="sticky top-0 z-99 px-4 xl:px-16 py-8 h-(--popover-top-offset) dark:bg-sand-dark-1 transition-transform duration-300 bg-sand-light-1 border-b border-transparent sticky-nav docs-nav"> <div class="grid grid-cols-12 gap-4 lg:gap-6 xl:gap-x-10 relative items-center h-full overflow-hidden"> <ul class="flex items-start col-span-3 space-x-8 font-medium "> <li class="w-20 transition-transform duration-300 ease-in-out mr-18 text-laravel-red" id="nav-left"> <a href="https://laravel.com" class="flex items-center w-20 aspect-[80/23]"> <svg class="w-full h-full" width="1280" height="308" viewBox="0 0 1280 308" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M50.2753 0H0V308.689H144.713V263.27H50.2753V0Z" fill="currentColor" /> <path d="M322.209 130.973C315.796 120.684 306.688 112.602 294.883 106.718C283.081 100.84 271.201 97.8969 259.253 97.8969C243.798 97.8969 229.665 100.764 216.843 106.496C204.014 112.228 193.015 120.099 183.834 130.091C174.654 140.088 167.51 151.628 162.412 164.706C157.308 177.792 154.761 191.54 154.761 205.94C154.761 220.645 157.308 234.457 162.412 247.39C167.508 260.332 174.652 271.796 183.834 281.788C193.015 291.785 204.017 299.647 216.843 305.379C229.665 311.111 243.798 313.978 259.253 313.978C271.201 313.978 283.081 311.038 294.883 305.159C306.688 299.282 315.796 291.197 322.209 280.904V308.685H369.865V103.186H322.209V130.973ZM317.837 231.076C314.922 239.016 310.841 245.925 305.598 251.804C300.35 257.687 294.009 262.389 286.579 265.917C279.146 269.445 270.905 271.208 261.875 271.208C252.837 271.208 244.676 269.445 237.391 265.917C230.104 262.389 223.839 257.687 218.593 251.804C213.345 245.925 209.335 239.016 206.57 231.076C203.794 223.138 202.417 214.759 202.417 205.942C202.417 197.12 203.794 188.742 206.57 180.804C209.335 172.866 213.345 165.961 218.593 160.078C223.839 154.201 230.102 149.493 237.391 145.965C244.676 142.437 252.837 140.674 261.875 140.674C270.908 140.674 279.146 142.437 286.579 145.965C294.009 149.493 300.35 154.199 305.598 160.078C310.844 165.961 314.922 172.866 317.837 180.804C320.748 188.742 322.209 197.12 322.209 205.942C322.209 214.759 320.748 223.138 317.837 231.076Z" fill="currentColor" /> <path d="M709.568 130.973C703.155 120.684 694.047 112.602 682.242 106.718C670.44 100.84 658.56 97.8969 646.612 97.8969C631.157 97.8969 617.024 100.764 604.202 106.496C591.373 112.228 580.374 120.099 571.193 130.091C562.013 140.088 554.869 151.628 549.771 164.706C544.666 177.792 542.12 191.54 542.12 205.94C542.12 220.645 544.666 234.457 549.771 247.39C554.867 260.332 562.01 271.796 571.193 281.788C580.374 291.785 591.375 299.647 604.202 305.379C617.024 311.111 631.157 313.978 646.612 313.978C658.56 313.978 670.44 311.038 682.242 305.159C694.047 299.282 703.155 291.197 709.568 280.904V308.685H757.224V103.186H709.568V130.973ZM705.198 231.076C702.283 239.016 698.202 245.925 692.959 251.804C687.711 257.687 681.37 262.389 673.94 265.917C666.507 269.445 658.266 271.208 649.236 271.208C640.198 271.208 632.037 269.445 624.752 265.917C617.465 262.389 611.2 257.687 605.954 251.804C600.706 245.925 596.696 239.016 593.931 231.076C591.155 223.138 589.778 214.759 589.778 205.942C589.778 197.12 591.155 188.742 593.931 180.804C596.696 172.866 600.706 165.961 605.954 160.078C611.2 154.201 617.463 149.493 624.752 145.965C632.037 142.437 640.198 140.674 649.236 140.674C658.269 140.674 666.507 142.437 673.94 145.965C681.37 149.493 687.711 154.199 692.959 160.078C698.205 165.961 702.283 172.866 705.198 180.804C708.109 188.742 709.57 197.12 709.57 205.942C709.568 214.759 708.107 223.138 705.198 231.076Z" fill="currentColor" /> <path d="M1280 1.12315e-05H1232.35V308.689H1280V1.12315e-05Z" fill="currentColor" /> <path d="M407.466 308.689H455.117V150.486H536.876V103.192H407.466V308.689Z" fill="currentColor" /> <path d="M948.281 103.192L888.386 260.557L828.489 103.192H780.224L858.441 308.689H918.331L996.546 103.192H948.281Z" fill="currentColor" /> <path d="M1100.48 97.908C1042.13 97.908 995.937 146.279 995.937 205.944C995.937 271.9 1040.64 313.98 1106.59 313.98C1143.5 313.98 1167.06 299.745 1195.85 268.746L1163.66 243.621C1163.64 243.646 1139.36 275.802 1103.1 275.802C1060.96 275.802 1043.22 241.533 1043.22 223.803H1201.32C1209.62 155.913 1165.37 97.908 1100.48 97.908ZM1043.35 188.085C1043.71 184.13 1049.2 136.086 1100.1 136.086C1151.01 136.086 1157.19 184.123 1157.55 188.085H1043.35Z" fill="currentColor" /> </svg> <span class="sr-only">Home</span> </a> </li> </ul> <div class="absolute top-0 flex items-center p-2 cursor-pointer right-9 lg:right-auto lg:top-auto lg:relative lg:col-span-6 lg:w-full lg:hover:bg-sand-light-4 lg:dark:hover:bg-sand-dark-4 rounded-xs lg:dark:bg-sand-dark-5 lg:bg-sand-light-3 text-sand-light-9-alpha-45 dark:text-sand-dark-11"> <svg class="w-6 h-6 lg:w-5 lg:h-5 lg:mr-2 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <g> <path d="M15.8333 15.8333L13.0523 13.0524M13.0523 13.0524C13.9943 12.1104 14.5769 10.8092 14.5769 9.3718C14.5769 6.49708 12.2465 4.16667 9.37176 4.16667C6.49704 4.16667 4.16663 6.49708 4.16663 9.3718C4.16663 12.2465 6.49704 14.5769 9.37176 14.5769C10.8091 14.5769 12.1104 13.9943 13.0523 13.0524Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </g> </svg> <div class="grow"> <div id="docsearch" class="absolute inset-0 lg:*:px-9 lg:*:py-1.5 *:absolute *:inset-0 text-base bg-transparent text-sand-light-9-alpha-45/70 dark:text-sand-dark-10"></div> </div> <span class="ml-2 hidden lg:block mr-1.5 text-sm font-medium shrink-0 text-sand-light-9 dark:text-sand-dark-10">⌘K</span> </div> <div class="flex items-center justify-end col-span-9 gap-4 lg:col-span-3 dark:text-sand-dark-12"> <select x-data aria-label="Laravel version" @change="window.location = $event.target.value" class="hidden text-sm py-1.5 px-3 bg-sand-light-1 dark:bg-sand-dark-1 border-0 whitespace-nowrap lg:block" > <option value="https://laravel.com/docs/master/dusk"> Version Master </option> <option selected value="https://laravel.com/docs/12.x/dusk"> Version 12.x </option> <option value="https://laravel.com/docs/11.x/dusk"> Version 11.x </option> <option value="https://laravel.com/docs/10.x/dusk"> Version 10.x </option> <option value="https://laravel.com/docs/9.x/dusk"> Version 9.x </option> <option value="https://laravel.com/docs/8.x/dusk"> Version 8.x </option> <option value="https://laravel.com/docs/7.x/dusk"> Version 7.x </option> <option value="https://laravel.com/docs/6.x/dusk"> Version 6.x </option> <option value="https://laravel.com/docs/5.8/dusk"> Version 5.8 </option> <option value="https://laravel.com/docs/5.7/dusk"> Version 5.7 </option> <option value="https://laravel.com/docs/5.6/dusk"> Version 5.6 </option> <option value="https://laravel.com/docs/5.5/dusk"> Version 5.5 </option> <option value="https://laravel.com/docs/5.4/dusk"> Version 5.4 </option> <option value="https://laravel.com/docs/5.3/dusk"> Version 5.3 </option> <option value="https://laravel.com/docs/5.2/dusk"> Version 5.2 </option> <option value="https://laravel.com/docs/5.1/dusk"> Version 5.1 </option> <option value="https://laravel.com/docs/5.0/dusk"> Version 5.0 </option> <option value="https://laravel.com/docs/4.2/dusk"> Version 4.2 </option> </select> <select x-data aria-label="Laravel version" @change="window.location = $event.target.value" class="text-sm py-1.5 px-3 bg-sand-light-1 dark:bg-sand-dark-1 border-0 whitespace-nowrap lg:hidden" > <option value="https://laravel.com/docs/master/dusk"> vMaster </option> <option selected value="https://laravel.com/docs/12.x/dusk"> v12.x </option> <option value="https://laravel.com/docs/11.x/dusk"> v11.x </option> <option value="https://laravel.com/docs/10.x/dusk"> v10.x </option> <option value="https://laravel.com/docs/9.x/dusk"> v9.x </option> <option value="https://laravel.com/docs/8.x/dusk"> v8.x </option> <option value="https://laravel.com/docs/7.x/dusk"> v7.x </option> <option value="https://laravel.com/docs/6.x/dusk"> v6.x </option> <option value="https://laravel.com/docs/5.8/dusk"> v5.8 </option> <option value="https://laravel.com/docs/5.7/dusk"> v5.7 </option> <option value="https://laravel.com/docs/5.6/dusk"> v5.6 </option> <option value="https://laravel.com/docs/5.5/dusk"> v5.5 </option> <option value="https://laravel.com/docs/5.4/dusk"> v5.4 </option> <option value="https://laravel.com/docs/5.3/dusk"> v5.3 </option> <option value="https://laravel.com/docs/5.2/dusk"> v5.2 </option> <option value="https://laravel.com/docs/5.1/dusk"> v5.1 </option> <option value="https://laravel.com/docs/5.0/dusk"> v5.0 </option> <option value="https://laravel.com/docs/4.2/dusk"> v4.2 </option> </select> <div class="hidden lg:block"> <div class="flex items-center size-8 group" x-data="themeSwitcher" x-on:switch-theme.window="saveAndUpdate($event.detail)"> <button id="header__sun" @click="toSystemMode" title="Switch to system theme" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0002 3.29071V1.76746M5.8418 18.1585L4.7647 19.2356M12.0002 22.2326V20.7093M19.2357 4.76456L18.1586 5.84166M20.7095 12H22.2327M18.1586 18.1584L19.2357 19.2355M1.76758 12H3.29083M4.76462 4.7645L5.84173 5.8416M15.7123 8.2877C17.7626 10.338 17.7626 13.6621 15.7123 15.7123C13.6621 17.7626 10.338 17.7626 8.2877 15.7123C6.23745 13.6621 6.23745 10.338 8.2877 8.2877C10.338 6.23745 13.6621 6.23745 15.7123 8.2877Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/> </svg> </button> <button id="header__moon" @click="toLightMode" title="Switch to light mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2496 14.1987C19.5326 14.3951 18.7782 14.5 18 14.5C13.3056 14.5 9.5 10.6944 9.5 5.99999C9.5 5.22185 9.60487 4.4674 9.80124 3.75043C6.15452 4.72095 3.46777 8.04578 3.46777 11.9981C3.46777 16.7114 7.28864 20.5323 12.0019 20.5323C15.9543 20.5323 19.2791 17.8455 20.2496 14.1987ZM20.5196 12.5328C19.7378 12.8346 18.8882 13 18 13C14.134 13 11 9.86598 11 5.99999C11 5.11181 11.1654 4.26226 11.4671 3.48047C11.6142 3.09951 11.7935 2.73464 12.0019 2.38923C12.0888 2.24526 12.1807 2.10466 12.2774 1.9677C12.1858 1.96523 12.094 1.96399 12.0019 1.96399C11.4758 1.96399 10.9592 2.00448 10.455 2.0825C5.64774 2.8264 1.96777 6.98251 1.96777 11.9981C1.96777 17.5398 6.46021 22.0323 12.0019 22.0323C17.0176 22.0323 21.1737 18.3523 21.9176 13.545C21.9956 13.0408 22.0361 12.5242 22.0361 11.9981C22.0361 11.906 22.0348 11.8141 22.0323 11.7226C21.8953 11.8193 21.7547 11.9112 21.6107 11.9981C21.2653 12.2065 20.9005 12.3858 20.5196 12.5328Z" fill="currentColor"/> <path d="M16.3333 5.33333L17.5 3L18.6667 5.33333L21 6.5L18.6667 7.66667L17.5 10L16.3333 7.66667L14 6.5L16.3333 5.33333Z" fill="currentColor"/> </svg> </button> <button id="header__indeterminate" @click="toDarkMode" title="Switch to dark mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6 dark:hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" /> </svg> <svg class="size-6 hidden dark:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"/> </svg> </button> </div> </div> <button popovertarget="docs-nav-mobile" class="cursor-pointer ml-13 lg:hidden"> <svg class="w-6 h-6 text-sand-light-9 hamburger-menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2.75 7.25H21.25M2.75 16.75H21.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" /> </svg> <svg class="w-6 h-6 text-sand-light-9 close-menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M4.75 4.75L19.25 19.25M19.25 4.75L4.75 19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" /> </svg> </button> </div> </div> </nav> <div popover id="docs-nav-mobile" class="fixed w-full bg-transparent main-nav-popover top-(--popover-top-offset)"> <div class="px-5 py-8 h-[calc(100dvh-5.5rem)] relative overflow-auto border-b docs_sidebar bg-sand-light-1 dark:bg-sand-dark-1"> <div class="absolute top-5 right-8"> <div class="flex items-center size-8 group" x-data="themeSwitcher" x-on:switch-theme.window="saveAndUpdate($event.detail)"> <button id="header__sun" @click="toSystemMode" title="Switch to system theme" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0002 3.29071V1.76746M5.8418 18.1585L4.7647 19.2356M12.0002 22.2326V20.7093M19.2357 4.76456L18.1586 5.84166M20.7095 12H22.2327M18.1586 18.1584L19.2357 19.2355M1.76758 12H3.29083M4.76462 4.7645L5.84173 5.8416M15.7123 8.2877C17.7626 10.338 17.7626 13.6621 15.7123 15.7123C13.6621 17.7626 10.338 17.7626 8.2877 15.7123C6.23745 13.6621 6.23745 10.338 8.2877 8.2877C10.338 6.23745 13.6621 6.23745 15.7123 8.2877Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/> </svg> </button> <button id="header__moon" @click="toLightMode" title="Switch to light mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2496 14.1987C19.5326 14.3951 18.7782 14.5 18 14.5C13.3056 14.5 9.5 10.6944 9.5 5.99999C9.5 5.22185 9.60487 4.4674 9.80124 3.75043C6.15452 4.72095 3.46777 8.04578 3.46777 11.9981C3.46777 16.7114 7.28864 20.5323 12.0019 20.5323C15.9543 20.5323 19.2791 17.8455 20.2496 14.1987ZM20.5196 12.5328C19.7378 12.8346 18.8882 13 18 13C14.134 13 11 9.86598 11 5.99999C11 5.11181 11.1654 4.26226 11.4671 3.48047C11.6142 3.09951 11.7935 2.73464 12.0019 2.38923C12.0888 2.24526 12.1807 2.10466 12.2774 1.9677C12.1858 1.96523 12.094 1.96399 12.0019 1.96399C11.4758 1.96399 10.9592 2.00448 10.455 2.0825C5.64774 2.8264 1.96777 6.98251 1.96777 11.9981C1.96777 17.5398 6.46021 22.0323 12.0019 22.0323C17.0176 22.0323 21.1737 18.3523 21.9176 13.545C21.9956 13.0408 22.0361 12.5242 22.0361 11.9981C22.0361 11.906 22.0348 11.8141 22.0323 11.7226C21.8953 11.8193 21.7547 11.9112 21.6107 11.9981C21.2653 12.2065 20.9005 12.3858 20.5196 12.5328Z" fill="currentColor"/> <path d="M16.3333 5.33333L17.5 3L18.6667 5.33333L21 6.5L18.6667 7.66667L17.5 10L16.3333 7.66667L14 6.5L16.3333 5.33333Z" fill="currentColor"/> </svg> </button> <button id="header__indeterminate" @click="toDarkMode" title="Switch to dark mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6 dark:hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" /> </svg> <svg class="size-6 hidden dark:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"/> </svg> </button> </div> </div> <ul> <li> <h2>Prologue</h2> <ul> <li><a href="/docs/12.x/releases">Release Notes</a></li> <li><a href="/docs/12.x/upgrade">Upgrade Guide</a></li> <li><a href="/docs/12.x/contributions">Contribution Guide</a></li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li><a href="/docs/12.x/installation">Installation</a></li> <li><a href="/docs/12.x/configuration">Configuration</a></li> <li><a href="/docs/12.x/structure">Directory Structure</a></li> <li><a href="/docs/12.x/frontend">Frontend</a></li> <li><a href="/docs/12.x/starter-kits">Starter Kits</a></li> <li><a href="/docs/12.x/deployment">Deployment</a></li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li><a href="/docs/12.x/lifecycle">Request Lifecycle</a></li> <li><a href="/docs/12.x/container">Service Container</a></li> <li><a href="/docs/12.x/providers">Service Providers</a></li> <li><a href="/docs/12.x/facades">Facades</a></li> </ul> </li> <li> <h2>The Basics</h2> <ul> <li><a href="/docs/12.x/routing">Routing</a></li> <li><a href="/docs/12.x/middleware">Middleware</a></li> <li><a href="/docs/12.x/csrf">CSRF Protection</a></li> <li><a href="/docs/12.x/controllers">Controllers</a></li> <li><a href="/docs/12.x/requests">Requests</a></li> <li><a href="/docs/12.x/responses">Responses</a></li> <li><a href="/docs/12.x/views">Views</a></li> <li><a href="/docs/12.x/blade">Blade Templates</a></li> <li><a href="/docs/12.x/vite">Asset Bundling</a></li> <li><a href="/docs/12.x/urls">URL Generation</a></li> <li><a href="/docs/12.x/session">Session</a></li> <li><a href="/docs/12.x/validation">Validation</a></li> <li><a href="/docs/12.x/errors">Error Handling</a></li> <li><a href="/docs/12.x/logging">Logging</a></li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li><a href="/docs/12.x/artisan">Artisan Console</a></li> <li><a href="/docs/12.x/broadcasting">Broadcasting</a></li> <li><a href="/docs/12.x/cache">Cache</a></li> <li><a href="/docs/12.x/collections">Collections</a></li> <li><a href="/docs/12.x/concurrency">Concurrency</a></li> <li><a href="/docs/12.x/context">Context</a></li> <li><a href="/docs/12.x/contracts">Contracts</a></li> <li><a href="/docs/12.x/events">Events</a></li> <li><a href="/docs/12.x/filesystem">File Storage</a></li> <li><a href="/docs/12.x/helpers">Helpers</a></li> <li><a href="/docs/12.x/http-client">HTTP Client</a></li> <li><a href="/docs/12.x/localization">Localization</a></li> <li><a href="/docs/12.x/mail">Mail</a></li> <li><a href="/docs/12.x/notifications">Notifications</a></li> <li><a href="/docs/12.x/packages">Package Development</a></li> <li><a href="/docs/12.x/processes">Processes</a></li> <li><a href="/docs/12.x/queues">Queues</a></li> <li><a href="/docs/12.x/rate-limiting">Rate Limiting</a></li> <li><a href="/docs/12.x/strings">Strings</a></li> <li><a href="/docs/12.x/scheduling">Task Scheduling</a></li> </ul> </li> <li> <h2>Security</h2> <ul> <li><a href="/docs/12.x/authentication">Authentication</a></li> <li><a href="/docs/12.x/authorization">Authorization</a></li> <li><a href="/docs/12.x/verification">Email Verification</a></li> <li><a href="/docs/12.x/encryption">Encryption</a></li> <li><a href="/docs/12.x/hashing">Hashing</a></li> <li><a href="/docs/12.x/passwords">Password Reset</a></li> </ul> </li> <li> <h2>Database</h2> <ul> <li><a href="/docs/12.x/database">Getting Started</a></li> <li><a href="/docs/12.x/queries">Query Builder</a></li> <li><a href="/docs/12.x/pagination">Pagination</a></li> <li><a href="/docs/12.x/migrations">Migrations</a></li> <li><a href="/docs/12.x/seeding">Seeding</a></li> <li><a href="/docs/12.x/redis">Redis</a></li> <li><a href="/docs/12.x/mongodb">MongoDB</a></li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li><a href="/docs/12.x/eloquent">Getting Started</a></li> <li><a href="/docs/12.x/eloquent-relationships">Relationships</a></li> <li><a href="/docs/12.x/eloquent-collections">Collections</a></li> <li><a href="/docs/12.x/eloquent-mutators">Mutators / Casts</a></li> <li><a href="/docs/12.x/eloquent-resources">API Resources</a></li> <li><a href="/docs/12.x/eloquent-serialization">Serialization</a></li> <li><a href="/docs/12.x/eloquent-factories">Factories</a></li> </ul> </li> <li class="sub--on"> <h2>Testing</h2> <ul> <li><a href="/docs/12.x/testing">Getting Started</a></li> <li><a href="/docs/12.x/http-tests">HTTP Tests</a></li> <li><a href="/docs/12.x/console-tests">Console Tests</a></li> <li class="active"><a href="/docs/12.x/dusk">Browser Tests</a></li> <li><a href="/docs/12.x/database-testing">Database</a></li> <li><a href="/docs/12.x/mocking">Mocking</a></li> </ul> </li> <li> <h2>Packages</h2> <ul> <li><a href="/docs/12.x/billing">Cashier (Stripe)</a></li> <li><a href="/docs/12.x/cashier-paddle">Cashier (Paddle)</a></li> <li class="active"><a href="/docs/12.x/dusk">Dusk</a></li> <li><a href="/docs/12.x/envoy">Envoy</a></li> <li><a href="/docs/12.x/fortify">Fortify</a></li> <li><a href="/docs/12.x/folio">Folio</a></li> <li><a href="/docs/12.x/homestead">Homestead</a></li> <li><a href="/docs/12.x/horizon">Horizon</a></li> <li><a href="/docs/12.x/mix">Mix</a></li> <li><a href="/docs/12.x/octane">Octane</a></li> <li><a href="/docs/12.x/passport">Passport</a></li> <li><a href="/docs/12.x/pennant">Pennant</a></li> <li><a href="/docs/12.x/pint">Pint</a></li> <li><a href="/docs/12.x/precognition">Precognition</a></li> <li><a href="/docs/12.x/prompts">Prompts</a></li> <li><a href="/docs/12.x/pulse">Pulse</a></li> <li><a href="/docs/12.x/reverb">Reverb</a></li> <li><a href="/docs/12.x/sail">Sail</a></li> <li><a href="/docs/12.x/sanctum">Sanctum</a></li> <li><a href="/docs/12.x/scout">Scout</a></li> <li><a href="/docs/12.x/socialite">Socialite</a></li> <li><a href="/docs/12.x/telescope">Telescope</a></li> <li><a href="/docs/12.x/valet">Valet</a></li> </ul> </li> <li><a href="https://api.laravel.com/docs/12.x">API Documentation</a></li> </ul> </div> </div> <div class="px-4 xl:px-16"> <a id="skip-to-content-link" href="#main-content" class="absolute bg-gray-100 px-4 py-2 top-3 left-3 text-gray-700 shadow-xl" > Skip to content </a> <div class="grid grid-cols-12 gap-4 lg:gap-6 xl:gap-x-10 px-6 mt-10 lg:px-0" id="docsScreen"> <aside class="relative col-span-3 lg:pb-6"> <div class="sticky bottom-0 left-0 z-20 hidden top-22 lg:block"> <div class="relative flex flex-col flex-1 max-h-screen pl-16 -ml-16 overflow-auto sticky-side-nav"> <nav id="indexed-nav" class="hidden lg:block"> <div class="docs_sidebar"> <ul> <li> <h2>Prologue</h2> <ul> <li><a href="/docs/12.x/releases">Release Notes</a></li> <li><a href="/docs/12.x/upgrade">Upgrade Guide</a></li> <li><a href="/docs/12.x/contributions">Contribution Guide</a></li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li><a href="/docs/12.x/installation">Installation</a></li> <li><a href="/docs/12.x/configuration">Configuration</a></li> <li><a href="/docs/12.x/structure">Directory Structure</a></li> <li><a href="/docs/12.x/frontend">Frontend</a></li> <li><a href="/docs/12.x/starter-kits">Starter Kits</a></li> <li><a href="/docs/12.x/deployment">Deployment</a></li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li><a href="/docs/12.x/lifecycle">Request Lifecycle</a></li> <li><a href="/docs/12.x/container">Service Container</a></li> <li><a href="/docs/12.x/providers">Service Providers</a></li> <li><a href="/docs/12.x/facades">Facades</a></li> </ul> </li> <li> <h2>The Basics</h2> <ul> <li><a href="/docs/12.x/routing">Routing</a></li> <li><a href="/docs/12.x/middleware">Middleware</a></li> <li><a href="/docs/12.x/csrf">CSRF Protection</a></li> <li><a href="/docs/12.x/controllers">Controllers</a></li> <li><a href="/docs/12.x/requests">Requests</a></li> <li><a href="/docs/12.x/responses">Responses</a></li> <li><a href="/docs/12.x/views">Views</a></li> <li><a href="/docs/12.x/blade">Blade Templates</a></li> <li><a href="/docs/12.x/vite">Asset Bundling</a></li> <li><a href="/docs/12.x/urls">URL Generation</a></li> <li><a href="/docs/12.x/session">Session</a></li> <li><a href="/docs/12.x/validation">Validation</a></li> <li><a href="/docs/12.x/errors">Error Handling</a></li> <li><a href="/docs/12.x/logging">Logging</a></li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li><a href="/docs/12.x/artisan">Artisan Console</a></li> <li><a href="/docs/12.x/broadcasting">Broadcasting</a></li> <li><a href="/docs/12.x/cache">Cache</a></li> <li><a href="/docs/12.x/collections">Collections</a></li> <li><a href="/docs/12.x/concurrency">Concurrency</a></li> <li><a href="/docs/12.x/context">Context</a></li> <li><a href="/docs/12.x/contracts">Contracts</a></li> <li><a href="/docs/12.x/events">Events</a></li> <li><a href="/docs/12.x/filesystem">File Storage</a></li> <li><a href="/docs/12.x/helpers">Helpers</a></li> <li><a href="/docs/12.x/http-client">HTTP Client</a></li> <li><a href="/docs/12.x/localization">Localization</a></li> <li><a href="/docs/12.x/mail">Mail</a></li> <li><a href="/docs/12.x/notifications">Notifications</a></li> <li><a href="/docs/12.x/packages">Package Development</a></li> <li><a href="/docs/12.x/processes">Processes</a></li> <li><a href="/docs/12.x/queues">Queues</a></li> <li><a href="/docs/12.x/rate-limiting">Rate Limiting</a></li> <li><a href="/docs/12.x/strings">Strings</a></li> <li><a href="/docs/12.x/scheduling">Task Scheduling</a></li> </ul> </li> <li> <h2>Security</h2> <ul> <li><a href="/docs/12.x/authentication">Authentication</a></li> <li><a href="/docs/12.x/authorization">Authorization</a></li> <li><a href="/docs/12.x/verification">Email Verification</a></li> <li><a href="/docs/12.x/encryption">Encryption</a></li> <li><a href="/docs/12.x/hashing">Hashing</a></li> <li><a href="/docs/12.x/passwords">Password Reset</a></li> </ul> </li> <li> <h2>Database</h2> <ul> <li><a href="/docs/12.x/database">Getting Started</a></li> <li><a href="/docs/12.x/queries">Query Builder</a></li> <li><a href="/docs/12.x/pagination">Pagination</a></li> <li><a href="/docs/12.x/migrations">Migrations</a></li> <li><a href="/docs/12.x/seeding">Seeding</a></li> <li><a href="/docs/12.x/redis">Redis</a></li> <li><a href="/docs/12.x/mongodb">MongoDB</a></li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li><a href="/docs/12.x/eloquent">Getting Started</a></li> <li><a href="/docs/12.x/eloquent-relationships">Relationships</a></li> <li><a href="/docs/12.x/eloquent-collections">Collections</a></li> <li><a href="/docs/12.x/eloquent-mutators">Mutators / Casts</a></li> <li><a href="/docs/12.x/eloquent-resources">API Resources</a></li> <li><a href="/docs/12.x/eloquent-serialization">Serialization</a></li> <li><a href="/docs/12.x/eloquent-factories">Factories</a></li> </ul> </li> <li class="sub--on"> <h2>Testing</h2> <ul> <li><a href="/docs/12.x/testing">Getting Started</a></li> <li><a href="/docs/12.x/http-tests">HTTP Tests</a></li> <li><a href="/docs/12.x/console-tests">Console Tests</a></li> <li class="active"><a href="/docs/12.x/dusk">Browser Tests</a></li> <li><a href="/docs/12.x/database-testing">Database</a></li> <li><a href="/docs/12.x/mocking">Mocking</a></li> </ul> </li> <li> <h2>Packages</h2> <ul> <li><a href="/docs/12.x/billing">Cashier (Stripe)</a></li> <li><a href="/docs/12.x/cashier-paddle">Cashier (Paddle)</a></li> <li class="active"><a href="/docs/12.x/dusk">Dusk</a></li> <li><a href="/docs/12.x/envoy">Envoy</a></li> <li><a href="/docs/12.x/fortify">Fortify</a></li> <li><a href="/docs/12.x/folio">Folio</a></li> <li><a href="/docs/12.x/homestead">Homestead</a></li> <li><a href="/docs/12.x/horizon">Horizon</a></li> <li><a href="/docs/12.x/mix">Mix</a></li> <li><a href="/docs/12.x/octane">Octane</a></li> <li><a href="/docs/12.x/passport">Passport</a></li> <li><a href="/docs/12.x/pennant">Pennant</a></li> <li><a href="/docs/12.x/pint">Pint</a></li> <li><a href="/docs/12.x/precognition">Precognition</a></li> <li><a href="/docs/12.x/prompts">Prompts</a></li> <li><a href="/docs/12.x/pulse">Pulse</a></li> <li><a href="/docs/12.x/reverb">Reverb</a></li> <li><a href="/docs/12.x/sail">Sail</a></li> <li><a href="/docs/12.x/sanctum">Sanctum</a></li> <li><a href="/docs/12.x/scout">Scout</a></li> <li><a href="/docs/12.x/socialite">Socialite</a></li> <li><a href="/docs/12.x/telescope">Telescope</a></li> <li><a href="/docs/12.x/valet">Valet</a></li> </ul> </li> <li><a href="https://api.laravel.com/docs/12.x">API Documentation</a></li> </ul> </div> </nav> </div> </div> </aside> <section class="col-span-12 lg:col-span-9 xl:col-span-6"> <div> <section> <section class="docs_main max-w-prose"> <div id="main-content"> <h1>Laravel Dusk</h1> <ul> <li><a href="#introduction">Introduction</a></li> <li><a href="#installation">Installation</a> <ul> <li><a href="#managing-chromedriver-installations">Managing ChromeDriver Installations</a></li> <li><a href="#using-other-browsers">Using Other Browsers</a></li> </ul> </li> <li><a href="#getting-started">Getting Started</a> <ul> <li><a href="#generating-tests">Generating Tests</a></li> <li><a href="#resetting-the-database-after-each-test">Resetting the Database After Each Test</a></li> <li><a href="#running-tests">Running Tests</a></li> <li><a href="#environment-handling">Environment Handling</a></li> </ul> </li> <li><a href="#browser-basics">Browser Basics</a> <ul> <li><a href="#creating-browsers">Creating Browsers</a></li> <li><a href="#navigation">Navigation</a></li> <li><a href="#resizing-browser-windows">Resizing Browser Windows</a></li> <li><a href="#browser-macros">Browser Macros</a></li> <li><a href="#authentication">Authentication</a></li> <li><a href="#cookies">Cookies</a></li> <li><a href="#executing-javascript">Executing JavaScript</a></li> <li><a href="#taking-a-screenshot">Taking a Screenshot</a></li> <li><a href="#storing-console-output-to-disk">Storing Console Output to Disk</a></li> <li><a href="#storing-page-source-to-disk">Storing Page Source to Disk</a></li> </ul> </li> <li><a href="#interacting-with-elements">Interacting With Elements</a> <ul> <li><a href="#dusk-selectors">Dusk Selectors</a></li> <li><a href="#text-values-and-attributes">Text, Values, and Attributes</a></li> <li><a href="#interacting-with-forms">Interacting With Forms</a></li> <li><a href="#attaching-files">Attaching Files</a></li> <li><a href="#pressing-buttons">Pressing Buttons</a></li> <li><a href="#clicking-links">Clicking Links</a></li> <li><a href="#using-the-keyboard">Using the Keyboard</a></li> <li><a href="#using-the-mouse">Using the Mouse</a></li> <li><a href="#javascript-dialogs">JavaScript Dialogs</a></li> <li><a href="#interacting-with-iframes">Interacting With Inline Frames</a></li> <li><a href="#scoping-selectors">Scoping Selectors</a></li> <li><a href="#waiting-for-elements">Waiting for Elements</a></li> <li><a href="#scrolling-an-element-into-view">Scrolling an Element Into View</a></li> </ul> </li> <li><a href="#available-assertions">Available Assertions</a></li> <li><a href="#pages">Pages</a> <ul> <li><a href="#generating-pages">Generating Pages</a></li> <li><a href="#configuring-pages">Configuring Pages</a></li> <li><a href="#navigating-to-pages">Navigating to Pages</a></li> <li><a href="#shorthand-selectors">Shorthand Selectors</a></li> <li><a href="#page-methods">Page Methods</a></li> </ul> </li> <li><a href="#components">Components</a> <ul> <li><a href="#generating-components">Generating Components</a></li> <li><a href="#using-components">Using Components</a></li> </ul> </li> <li><a href="#continuous-integration">Continuous Integration</a> <ul> <li><a href="#running-tests-on-heroku-ci">Heroku CI</a></li> <li><a href="#running-tests-on-travis-ci">Travis CI</a></li> <li><a href="#running-tests-on-github-actions">GitHub Actions</a></li> <li><a href="#running-tests-on-chipper-ci">Chipper CI</a></li> </ul> </li> </ul> <h2 id="introduction"><a href="#introduction">Introduction</a></h2> <p><a href="https://github.com/laravel/dusk">Laravel Dusk</a> provides an expressive, easy-to-use browser automation and testing API. By default, Dusk does not require you to install JDK or Selenium on your local computer. Instead, Dusk uses a standalone <a href="https://sites.google.com/chromium.org/driver">ChromeDriver</a> installation. However, you are free to utilize any other Selenium compatible driver you wish.</p> <h2 id="installation"><a href="#installation">Installation</a></h2> <p>To get started, you should install <a href="https://www.google.com/chrome">Google Chrome</a> and add the <code>laravel/dusk</code> Composer dependency to your project:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">composer </span><span style="color: #BFC7D5;">require</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">laravel/dusk</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--dev</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> composer require laravel/dusk --dev</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> If you are manually registering Dusk's service provider, you should <strong>never</strong> register it in your production environment, as doing so could lead to arbitrary users being able to authenticate with your application.</p> </div> <p>After installing the Dusk package, execute the <code>dusk:install</code> Artisan command. The <code>dusk:install</code> command will create a <code>tests/Browser</code> directory, an example Dusk test, and install the Chrome Driver binary for your operating system:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:install</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan dusk:install</div></code></pre> </div> <p>Next, set the <code>APP_URL</code> environment variable in your application's <code>.env</code> file. This value should match the URL you use to access your application in a browser.</p> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> If you are using <a href="/docs/12.x/sail">Laravel Sail</a> to manage your local development environment, please also consult the Sail documentation on <a href="/docs/12.x/sail#laravel-dusk">configuring and running Dusk tests</a>.</p> </div> <h3 id="managing-chromedriver-installations"><a href="#managing-chromedriver-installations">Managing ChromeDriver Installations</a></h3> <p>If you would like to install a different version of ChromeDriver than what is installed by Laravel Dusk via the <code>dusk:install</code> command, you may use the <code>dusk:chrome-driver</code> command:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">#</span><span style="color: #697098;"> Install the latest version of ChromeDriver for your OS...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:chrome-driver</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;">#</span><span style="color: #697098;"> Install a given version of ChromeDriver for your OS...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:chrome-driver</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">86</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #697098;">#</span><span style="color: #697098;"> Install a given version of ChromeDriver for all supported OSs...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:chrome-driver</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--all</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #697098;">#</span><span style="color: #697098;"> Install the version of ChromeDriver that matches the detected version of Chrome / Chromium for your OS...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:chrome-driver</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--detect</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> # Install the latest version of ChromeDriver for your OS... php artisan dusk:chrome-driver # Install a given version of ChromeDriver for your OS... php artisan dusk:chrome-driver 86 # Install a given version of ChromeDriver for all supported OSs... php artisan dusk:chrome-driver --all # Install the version of ChromeDriver that matches the detected version of Chrome / Chromium for your OS... php artisan dusk:chrome-driver --detect</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> Dusk requires the <code>chromedriver</code> binaries to be executable. If you're having problems running Dusk, you should ensure the binaries are executable using the following command: <code>chmod -R 0755 vendor/laravel/dusk/bin/</code>.</p> </div> <h3 id="using-other-browsers"><a href="#using-other-browsers">Using Other Browsers</a></h3> <p>By default, Dusk uses Google Chrome and a standalone <a href="https://sites.google.com/chromium.org/driver">ChromeDriver</a> installation to run your browser tests. However, you may start your own Selenium server and run your tests against any browser you wish.</p> <p>To get started, open your <code>tests/DuskTestCase.php</code> file, which is the base Dusk test case for your application. Within this file, you can remove the call to the <code>startChromeDriver</code> method. This will stop Dusk from automatically starting the ChromeDriver:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Prepare for Dusk test execution.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * @beforeClass</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">static</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">prepare</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> static::startChromeDriver();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Prepare for Dusk test execution. * * @beforeClass */ public static function prepare(): void { // static::startChromeDriver(); }</div></code></pre> </div> <p>Next, you may modify the <code>driver</code> method to connect to the URL and port of your choice. In addition, you may modify the "desired capabilities" that should be passed to the WebDriver:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Facebook\WebDriver\Remote\</span><span style="color: #FFCB8B;">RemoteWebDriver</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * Create the RemoteWebDriver instance.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">driver</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">RemoteWebDriver</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">RemoteWebDriver</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">create</span><span style="color: #BFC7D5;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">http://localhost:4444/wd/hub</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #FFCB8B;">DesiredCapabilities</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">phantomjs</span><span style="color: #BFC7D5;">()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> );</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Facebook\WebDriver\Remote\RemoteWebDriver; /** * Create the RemoteWebDriver instance. */ protected function driver(): RemoteWebDriver { return RemoteWebDriver::create( 'http://localhost:4444/wd/hub', DesiredCapabilities::phantomjs() ); }</div></code></pre> </div> <h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2> <h3 id="generating-tests"><a href="#generating-tests">Generating Tests</a></h3> <p>To generate a Dusk test, use the <code>dusk:make</code> Artisan command. The generated test will be placed in the <code>tests/Browser</code> directory:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:make</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">LoginTest</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan dusk:make LoginTest</div></code></pre> </div> <h3 id="resetting-the-database-after-each-test"><a href="#resetting-the-database-after-each-test">Resetting the Database After Each Test</a></h3> <p>Most of the tests you write will interact with pages that retrieve data from your application's database; however, your Dusk tests should never use the <code>RefreshDatabase</code> trait. The <code>RefreshDatabase</code> trait leverages database transactions which will not be applicable or available across HTTP requests. Instead, you have two options: the <code>DatabaseMigrations</code> trait and the <code>DatabaseTruncation</code> trait.</p> <h4 id="reset-migrations"><a href="#reset-migrations">Using Database Migrations</a></h4> <p>The <code>DatabaseMigrations</code> trait will run your database migrations before each test. However, dropping and re-creating your database tables for each test is typically slower than truncating the tables:</p> <div class="tabbed-code" data-group="1df3cf502597c6d6b58a6e0bfc806498"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Pest" onClick="setTab('Pest', '1df3cf502597c6d6b58a6e0bfc806498')">Pest</button> <button class="tabbed-code-nav-button" data-tab="PHPUnit" onClick="setTab('PHPUnit', '1df3cf502597c6d6b58a6e0bfc806498')">PHPUnit</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Pest"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #82AAFF;">uses</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #697098;">//</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php use Illuminate\Foundation\Testing\DatabaseMigrations; use Laravel\Dusk\Browser; uses(DatabaseMigrations::class); //</div></code></pre> </div> <div class="code-container" data-tab="PHPUnit"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> Tests\Browser;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\</span><span style="color: #FFCB8B;">DuskTestCase</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">ExampleTest</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">DuskTestCase</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace Tests\Browser; use Illuminate\Foundation\Testing\DatabaseMigrations; use Laravel\Dusk\Browser; use Tests\DuskTestCase; class ExampleTest extends DuskTestCase { use DatabaseMigrations; // }</div></code></pre> </div> </div> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> SQLite in-memory databases may not be used when executing Dusk tests. Since the browser executes within its own process, it will not be able to access the in-memory databases of other processes.</p> </div> <h4 id="reset-truncation"><a href="#reset-truncation">Using Database Truncation</a></h4> <p>The <code>DatabaseTruncation</code> trait will migrate your database on the first test in order to ensure your database tables have been properly created. However, on subsequent tests, the database's tables will simply be truncated - providing a speed boost over re-running all of your database migrations:</p> <div class="tabbed-code" data-group="1df3cf502597c6d6b58a6e0bfc806498"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Pest" onClick="setTab('Pest', '1df3cf502597c6d6b58a6e0bfc806498')">Pest</button> <button class="tabbed-code-nav-button" data-tab="PHPUnit" onClick="setTab('PHPUnit', '1df3cf502597c6d6b58a6e0bfc806498')">PHPUnit</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Pest"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseTruncation</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #82AAFF;">uses</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">DatabaseTruncation</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #697098;">//</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php use Illuminate\Foundation\Testing\DatabaseTruncation; use Laravel\Dusk\Browser; uses(DatabaseTruncation::class); //</div></code></pre> </div> <div class="code-container" data-tab="PHPUnit"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> Tests\Browser;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseTruncation</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\</span><span style="color: #FFCB8B;">DuskTestCase</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">ExampleTest</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">DuskTestCase</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">DatabaseTruncation</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace Tests\Browser; use App\Models\User; use Illuminate\Foundation\Testing\DatabaseTruncation; use Laravel\Dusk\Browser; use Tests\DuskTestCase; class ExampleTest extends DuskTestCase { use DatabaseTruncation; // }</div></code></pre> </div> </div> </div> <p>By default, this trait will truncate all tables except the <code>migrations</code> table. If you would like to customize the tables that should be truncated, you may define a <code>$tablesToTruncate</code> property on your test class:</p> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> If you are using Pest, you should define properties or methods on the base <code>DuskTestCase</code> class or on any class your test file extends.</p> </div> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Indicates which tables should be truncated.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@var</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$tablesToTruncate</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">];</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Indicates which tables should be truncated. * * @var array */ protected $tablesToTruncate = ['users'];</div></code></pre> </div> <p>Alternatively, you may define an <code>$exceptTables</code> property on your test class to specify which tables should be excluded from truncation:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Indicates which tables should be excluded from truncation.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@var</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$exceptTables</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">];</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Indicates which tables should be excluded from truncation. * * @var array */ protected $exceptTables = ['users'];</div></code></pre> </div> <p>To specify the database connections that should have their tables truncated, you may define a <code>$connectionsToTruncate</code> property on your test class:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Indicates which connections should have their tables truncated.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@var</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$connectionsToTruncate</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">mysql</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">];</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Indicates which connections should have their tables truncated. * * @var array */ protected $connectionsToTruncate = ['mysql'];</div></code></pre> </div> <p>If you would like to execute code before or after database truncation is performed, you may define <code>beforeTruncatingDatabase</code> or <code>afterTruncatingDatabase</code> methods on your test class:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #697098;"> * Perform any work that should take place before the database has started truncating.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">beforeTruncatingDatabase</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #697098;"> * Perform any work that should take place after the database has finished truncating.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">afterTruncatingDatabase</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Perform any work that should take place before the database has started truncating. */ protected function beforeTruncatingDatabase(): void { // } /** * Perform any work that should take place after the database has finished truncating. */ protected function afterTruncatingDatabase(): void { // }</div></code></pre> </div> <h3 id="running-tests"><a href="#running-tests">Running Tests</a></h3> <p>To run your browser tests, execute the <code>dusk</code> Artisan command:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan dusk</div></code></pre> </div> <p>If you had test failures the last time you ran the <code>dusk</code> command, you may save time by re-running the failing tests first using the <code>dusk:fails</code> command:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:fails</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan dusk:fails</div></code></pre> </div> <p>The <code>dusk</code> command accepts any argument that is normally accepted by the Pest / PHPUnit test runner, such as allowing you to only run the tests for a given <a href="https://docs.phpunit.de/en/10.5/annotations.html#group">group</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--group=foo</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan dusk --group=foo</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> If you are using <a href="/docs/12.x/sail">Laravel Sail</a> to manage your local development environment, please consult the Sail documentation on <a href="/docs/12.x/sail#laravel-dusk">configuring and running Dusk tests</a>.</p> </div> <h4 id="manually-starting-chromedriver"><a href="#manually-starting-chromedriver">Manually Starting ChromeDriver</a></h4> <p>By default, Dusk will automatically attempt to start ChromeDriver. If this does not work for your particular system, you may manually start ChromeDriver before running the <code>dusk</code> command. If you choose to start ChromeDriver manually, you should comment out the following line of your <code>tests/DuskTestCase.php</code> file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Prepare for Dusk test execution.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * @beforeClass</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">static</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">prepare</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> static::startChromeDriver();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Prepare for Dusk test execution. * * @beforeClass */ public static function prepare(): void { // static::startChromeDriver(); }</div></code></pre> </div> <p>In addition, if you start ChromeDriver on a port other than 9515, you should modify the <code>driver</code> method of the same class to reflect the correct port:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Facebook\WebDriver\Remote\</span><span style="color: #FFCB8B;">RemoteWebDriver</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * Create the RemoteWebDriver instance.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">driver</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">RemoteWebDriver</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">RemoteWebDriver</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">create</span><span style="color: #BFC7D5;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">http://localhost:9515</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #FFCB8B;">DesiredCapabilities</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">chrome</span><span style="color: #BFC7D5;">()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> );</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Facebook\WebDriver\Remote\RemoteWebDriver; /** * Create the RemoteWebDriver instance. */ protected function driver(): RemoteWebDriver { return RemoteWebDriver::create( 'http://localhost:9515', DesiredCapabilities::chrome() ); }</div></code></pre> </div> <h3 id="environment-handling"><a href="#environment-handling">Environment Handling</a></h3> <p>To force Dusk to use its own environment file when running tests, create a <code>.env.dusk.{environment}</code> file in the root of your project. For example, if you will be initiating the <code>dusk</code> command from your <code>local</code> environment, you should create a <code>.env.dusk.local</code> file.</p> <p>When running tests, Dusk will back-up your <code>.env</code> file and rename your Dusk environment to <code>.env</code>. Once the tests have completed, your <code>.env</code> file will be restored.</p> <h2 id="browser-basics"><a href="#browser-basics">Browser Basics</a></h2> <h3 id="creating-browsers"><a href="#creating-browsers">Creating Browsers</a></h3> <p>To get started, let's write a test that verifies we can log into our application. After generating a test, we can modify it to navigate to the login page, enter some credentials, and click the "Login" button. To create a browser instance, you may call the <code>browse</code> method from within your Dusk test:</p> <div class="tabbed-code" data-group="1df3cf502597c6d6b58a6e0bfc806498"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Pest" onClick="setTab('Pest', '1df3cf502597c6d6b58a6e0bfc806498')">Pest</button> <button class="tabbed-code-nav-button" data-tab="PHPUnit" onClick="setTab('PHPUnit', '1df3cf502597c6d6b58a6e0bfc806498')">PHPUnit</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Pest"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #82AAFF;">uses</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #82AAFF;">test</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">basic example</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">user</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">=</span><span style="color: #82AAFF;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">factory</span><span style="color: #BFC7D5;">()</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">create</span><span style="color: #BFC7D5;">([</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7c3d6cedbd8c5f7dbd6c5d6c1d2db99d4d8da">[email protected]</a></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #FF5572;">this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #D9F5DD;">)</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">use</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">user</span><span style="color: #D9F5DD;">)</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">user</span><span style="color: #89DDFF;">->email</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">password</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">password</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathIs</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">});</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php use App\Models\User; use Illuminate\Foundation\Testing\DatabaseMigrations; use Laravel\Dusk\Browser; uses(DatabaseMigrations::class); test('basic example', function () { $user = User::factory()->create([ 'email' => '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c180d1500031e2c000d1e0d1a0900420f0301">[email protected]</a>', ]); $this->browse(function (Browser $browser) use ($user) { $browser->visit('/login') ->type('email', $user->email) ->type('password', 'password') ->press('Login') ->assertPathIs('/home'); }); });</div></code></pre> </div> <div class="code-container" data-tab="PHPUnit"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> Tests\Browser;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\</span><span style="color: #FFCB8B;">DuskTestCase</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">ExampleTest</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">DuskTestCase</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #697098;"> * A basic browser test example.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">test_basic_example</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">factory</span><span style="color: #BFC7D5;">()</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">create</span><span style="color: #BFC7D5;">([</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f682978f9a9984b69a97849780939ad895999b">[email protected]</a></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> ]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->email</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">password</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">password</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">28</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathIs</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">29</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">30</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">31</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace Tests\Browser; use App\Models\User; use Illuminate\Foundation\Testing\DatabaseMigrations; use Laravel\Dusk\Browser; use Tests\DuskTestCase; class ExampleTest extends DuskTestCase { use DatabaseMigrations; /** * A basic browser test example. */ public function test_basic_example(): void { $user = User::factory()->create([ 'email' => '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c5d0c8dddec3f1ddd0c3d0c7d4dd9fd2dedc">[email protected]</a>', ]); $this->browse(function (Browser $browser) use ($user) { $browser->visit('/login') ->type('email', $user->email) ->type('password', 'password') ->press('Login') ->assertPathIs('/home'); }); } }</div></code></pre> </div> </div> </div> <p>As you can see in the example above, the <code>browse</code> method accepts a closure. A browser instance will automatically be passed to this closure by Dusk and is the main object used to interact with and make assertions against your application.</p> <h4 id="creating-multiple-browsers"><a href="#creating-multiple-browsers">Creating Multiple Browsers</a></h4> <p>Sometimes you may need multiple browsers in order to properly carry out a test. For example, multiple browsers may be needed to test a chat screen that interacts with websockets. To create multiple browsers, simply add more browser arguments to the signature of the closure given to the <code>browse</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$first</span><span style="color: #BFC7D5;">, </span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$second</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$first</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">loginAs</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">find</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">))</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForText</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Message</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$second</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">loginAs</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">find</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">2</span><span style="color: #BFC7D5;">))</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForText</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Message</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">message</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hey Taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Send</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$first</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForText</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hey Taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Jeffrey Way</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $this->browse(function (Browser $first, Browser $second) { $first->loginAs(User::find(1)) ->visit('/home') ->waitForText('Message'); $second->loginAs(User::find(2)) ->visit('/home') ->waitForText('Message') ->type('message', 'Hey Taylor') ->press('Send'); $first->waitForText('Hey Taylor') ->assertSee('Jeffrey Way'); });</div></code></pre> </div> <h3 id="navigation"><a href="#navigation">Navigation</a></h3> <p>The <code>visit</code> method may be used to navigate to a given URI within your application:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->visit('/login');</div></code></pre> </div> <p>You may use the <code>visitRoute</code> method to navigate to a <a href="/docs/12.x/routing#named-routes">named route</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visitRoute</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$routeName</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$parameters</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->visitRoute($routeName, $parameters);</div></code></pre> </div> <p>You may navigate "back" and "forward" using the <code>back</code> and <code>forward</code> methods:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">back</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">forward</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->back(); $browser->forward();</div></code></pre> </div> <p>You may use the <code>refresh</code> method to refresh the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">refresh</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->refresh();</div></code></pre> </div> <h3 id="resizing-browser-windows"><a href="#resizing-browser-windows">Resizing Browser Windows</a></h3> <p>You may use the <code>resize</code> method to adjust the size of the browser window:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">resize</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">1920</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1080</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->resize(1920, 1080);</div></code></pre> </div> <p>The <code>maximize</code> method may be used to maximize the browser window:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">maximize</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->maximize();</div></code></pre> </div> <p>The <code>fitContent</code> method will resize the browser window to match the size of its content:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">fitContent</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->fitContent();</div></code></pre> </div> <p>When a test fails, Dusk will automatically resize the browser to fit the content prior to taking a screenshot. You may disable this feature by calling the <code>disableFitOnFailure</code> method within your test:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">disableFitOnFailure</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->disableFitOnFailure();</div></code></pre> </div> <p>You may use the <code>move</code> method to move the browser window to a different position on your screen:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">move</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$x</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">100</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$y</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">100</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->move($x = 100, $y = 100);</div></code></pre> </div> <h3 id="browser-macros"><a href="#browser-macros">Browser Macros</a></h3> <p>If you would like to define a custom browser method that you can re-use in a variety of your tests, you may use the <code>macro</code> method on the <code>Browser</code> class. Typically, you should call this method from a <a href="/docs/12.x/providers">service provider's</a> <code>boot</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Providers;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">ServiceProvider</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">DuskServiceProvider</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">ServiceProvider</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #697098;"> * Register Dusk's browser macros.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Browser</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">macro</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scrollToElement</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$element</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">null</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">script</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$('html, body').animate({ scrollTop: $('</span><span style="color: #BEC5D4;">$element</span><span style="color: #C3E88D;">').offset().top }, 0);</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace App\Providers; use Illuminate\Support\ServiceProvider; use Laravel\Dusk\Browser; class DuskServiceProvider extends ServiceProvider { /** * Register Dusk's browser macros. */ public function boot(): void { Browser::macro('scrollToElement', function (string $element = null) { $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);"); return $this; }); } }</div></code></pre> </div> <p>The <code>macro</code> function accepts a name as its first argument, and a closure as its second. The macro's closure will be executed when calling the macro as a method on a <code>Browser</code> instance:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/pay</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">scrollToElement</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#credit-card-details</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Enter Credit Card Details</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $this->browse(function (Browser $browser) use ($user) { $browser->visit('/pay') ->scrollToElement('#credit-card-details') ->assertSee('Enter Credit Card Details'); });</div></code></pre> </div> <h3 id="authentication"><a href="#authentication">Authentication</a></h3> <p>Often, you will be testing pages that require authentication. You can use Dusk's <code>loginAs</code> method in order to avoid interacting with your application's login screen during every test. The <code>loginAs</code> method accepts a primary key associated with your authenticatable model or an authenticatable model instance:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">loginAs</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">find</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">))</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use App\Models\User; use Laravel\Dusk\Browser; $this->browse(function (Browser $browser) { $browser->loginAs(User::find(1)) ->visit('/home'); });</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> After using the <code>loginAs</code> method, the user session will be maintained for all tests within the file.</p> </div> <h3 id="cookies"><a href="#cookies">Cookies</a></h3> <p>You may use the <code>cookie</code> method to get or set an encrypted cookie's value. By default, all of the cookies created by Laravel are encrypted:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">cookie</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">cookie</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->cookie('name'); $browser->cookie('name', 'Taylor');</div></code></pre> </div> <p>You may use the <code>plainCookie</code> method to get or set an unencrypted cookie's value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">plainCookie</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">plainCookie</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->plainCookie('name'); $browser->plainCookie('name', 'Taylor');</div></code></pre> </div> <p>You may use the <code>deleteCookie</code> method to delete the given cookie:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">deleteCookie</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->deleteCookie('name');</div></code></pre> </div> <h3 id="executing-javascript"><a href="#executing-javascript">Executing JavaScript</a></h3> <p>You may use the <code>script</code> method to execute arbitrary JavaScript statements within the browser:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">script</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">document.documentElement.scrollTop = 0</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">script</span><span style="color: #BFC7D5;">([</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">document.body.scrollTop = 0</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">document.documentElement.scrollTop = 0</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BEC5D4;">$output</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">script</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">return window.location.pathname</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->script('document.documentElement.scrollTop = 0'); $browser->script([ 'document.body.scrollTop = 0', 'document.documentElement.scrollTop = 0', ]); $output = $browser->script('return window.location.pathname');</div></code></pre> </div> <h3 id="taking-a-screenshot"><a href="#taking-a-screenshot">Taking a Screenshot</a></h3> <p>You may use the <code>screenshot</code> method to take a screenshot and store it with the given filename. All screenshots will be stored within the <code>tests/Browser/screenshots</code> directory:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">screenshot</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">filename</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->screenshot('filename');</div></code></pre> </div> <p>The <code>responsiveScreenshots</code> method may be used to take a series of screenshots at various breakpoints:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">responsiveScreenshots</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">filename</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->responsiveScreenshots('filename');</div></code></pre> </div> <p>The <code>screenshotElement</code> method may be used to take a screenshot of a specific element on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">screenshotElement</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">filename</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->screenshotElement('#selector', 'filename');</div></code></pre> </div> <h3 id="storing-console-output-to-disk"><a href="#storing-console-output-to-disk">Storing Console Output to Disk</a></h3> <p>You may use the <code>storeConsoleLog</code> method to write the current browser's console output to disk with the given filename. Console output will be stored within the <code>tests/Browser/console</code> directory:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">storeConsoleLog</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">filename</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->storeConsoleLog('filename');</div></code></pre> </div> <h3 id="storing-page-source-to-disk"><a href="#storing-page-source-to-disk">Storing Page Source to Disk</a></h3> <p>You may use the <code>storeSource</code> method to write the current page's source to disk with the given filename. The page source will be stored within the <code>tests/Browser/source</code> directory:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">storeSource</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">filename</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->storeSource('filename');</div></code></pre> </div> <h2 id="interacting-with-elements"><a href="#interacting-with-elements">Interacting With Elements</a></h2> <h3 id="dusk-selectors"><a href="#dusk-selectors">Dusk Selectors</a></h3> <p>Choosing good CSS selectors for interacting with elements is one of the hardest parts of writing Dusk tests. Over time, frontend changes can cause CSS selectors like the following to break your tests:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="html" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">// HTML...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Login</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // HTML... <button>Login</button></div></code></pre> </div> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Test...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.login-page .container div > button</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Test... $browser->click('.login-page .container div > button');</div></code></pre> </div> <p>Dusk selectors allow you to focus on writing effective tests rather than remembering CSS selectors. To define a selector, add a <code>dusk</code> attribute to your HTML element. Then, when interacting with a Dusk browser, prefix the selector with <code>@</code> to manipulate the attached element within your test:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="html" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">// HTML...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">dusk</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">login-button</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Login</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // HTML... <button dusk="login-button">Login</button></div></code></pre> </div> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Test...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@login-button</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Test... $browser->click('@login-button');</div></code></pre> </div> <p>If desired, you may customize the HTML attribute that the Dusk selector utilizes via the <code>selectorHtmlAttribute</code> method. Typically, this method should be called from the <code>boot</code> method of your application's <code>AppServiceProvider</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Dusk</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #FFCB8B;">Dusk</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">selectorHtmlAttribute</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">data-dusk</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Laravel\Dusk\Dusk; Dusk::selectorHtmlAttribute('data-dusk');</div></code></pre> </div> <h3 id="text-values-and-attributes"><a href="#text-values-and-attributes">Text, Values, and Attributes</a></h3> <h4 id="retrieving-setting-values"><a href="#retrieving-setting-values">Retrieving and Setting Values</a></h4> <p>Dusk provides several methods for interacting with the current value, display text, and attributes of elements on the page. For example, to get the "value" of an element that matches a given CSS or Dusk selector, use the <code>value</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Retrieve the value...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">value</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Set the value...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">value</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">value</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Retrieve the value... $value = $browser->value('selector'); // Set the value... $browser->value('selector', 'value');</div></code></pre> </div> <p>You may use the <code>inputValue</code> method to get the "value" of an input element that has a given field name:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">inputValue</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">field</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $value = $browser->inputValue('field');</div></code></pre> </div> <h4 id="retrieving-text"><a href="#retrieving-text">Retrieving Text</a></h4> <p>The <code>text</code> method may be used to retrieve the display text of an element that matches the given selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$text</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">text</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $text = $browser->text('selector');</div></code></pre> </div> <h4 id="retrieving-attributes"><a href="#retrieving-attributes">Retrieving Attributes</a></h4> <p>Finally, the <code>attribute</code> method may be used to retrieve the value of an attribute of an element matching the given selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$attribute</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">attribute</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">value</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $attribute = $browser->attribute('selector', 'value');</div></code></pre> </div> <h3 id="interacting-with-forms"><a href="#interacting-with-forms">Interacting With Forms</a></h3> <h4 id="typing-values"><a href="#typing-values">Typing Values</a></h4> <p>Dusk provides a variety of methods for interacting with forms and input elements. First, let's take a look at an example of typing text into an input field:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afdbced6c3c0ddefc3ceddced9cac381ccc0c2">[email protected]</a></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->type('email', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdb9acb4a1a2bf8da1acbfacbba8a1e3aea2a0">[email protected]</a>');</div></code></pre> </div> <p>Note that, although the method accepts one if necessary, we are not required to pass a CSS selector into the <code>type</code> method. If a CSS selector is not provided, Dusk will search for an <code>input</code> or <code>textarea</code> field with the given <code>name</code> attribute.</p> <p>To append text to a field without clearing its content, you may use the <code>append</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">tags</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">foo</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">append</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">tags</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">, bar, baz</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->type('tags', 'foo') ->append('tags', ', bar, baz');</div></code></pre> </div> <p>You may clear the value of an input using the <code>clear</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clear</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->clear('email');</div></code></pre> </div> <p>You can instruct Dusk to type slowly using the <code>typeSlowly</code> method. By default, Dusk will pause for 100 milliseconds between key presses. To customize the amount of time between key presses, you may pass the appropriate number of milliseconds as the third argument to the method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">typeSlowly</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">mobile</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">+1 (202) 555-5555</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">typeSlowly</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">mobile</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">+1 (202) 555-5555</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">300</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->typeSlowly('mobile', '+1 (202) 555-5555'); $browser->typeSlowly('mobile', '+1 (202) 555-5555', 300);</div></code></pre> </div> <p>You may use the <code>appendSlowly</code> method to append text slowly:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">tags</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">foo</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">appendSlowly</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">tags</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">, bar, baz</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->type('tags', 'foo') ->appendSlowly('tags', ', bar, baz');</div></code></pre> </div> <h4 id="dropdowns"><a href="#dropdowns">Dropdowns</a></h4> <p>To select a value available on a <code>select</code> element, you may use the <code>select</code> method. Like the <code>type</code> method, the <code>select</code> method does not require a full CSS selector. When passing a value to the <code>select</code> method, you should pass the underlying option value instead of the display text:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">select</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">size</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Large</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->select('size', 'Large');</div></code></pre> </div> <p>You may select a random option by omitting the second argument:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">select</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">size</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->select('size');</div></code></pre> </div> <p>By providing an array as the second argument to the <code>select</code> method, you can instruct the method to select multiple options:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">select</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">categories</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Art</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Music</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->select('categories', ['Art', 'Music']);</div></code></pre> </div> <h4 id="checkboxes"><a href="#checkboxes">Checkboxes</a></h4> <p>To "check" a checkbox input, you may use the <code>check</code> method. Like many other input related methods, a full CSS selector is not required. If a CSS selector match can't be found, Dusk will search for a checkbox with a matching <code>name</code> attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">check</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">terms</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->check('terms');</div></code></pre> </div> <p>The <code>uncheck</code> method may be used to "uncheck" a checkbox input:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">uncheck</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">terms</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->uncheck('terms');</div></code></pre> </div> <h4 id="radio-buttons"><a href="#radio-buttons">Radio Buttons</a></h4> <p>To "select" a <code>radio</code> input option, you may use the <code>radio</code> method. Like many other input related methods, a full CSS selector is not required. If a CSS selector match can't be found, Dusk will search for a <code>radio</code> input with matching <code>name</code> and <code>value</code> attributes:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">radio</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">size</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">large</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->radio('size', 'large');</div></code></pre> </div> <h3 id="attaching-files"><a href="#attaching-files">Attaching Files</a></h3> <p>The <code>attach</code> method may be used to attach a file to a <code>file</code> input element. Like many other input related methods, a full CSS selector is not required. If a CSS selector match can't be found, Dusk will search for a <code>file</code> input with a matching <code>name</code> attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">attach</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">photo</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #82AAFF;">__DIR__</span><span style="color: #89DDFF;">.</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/photos/mountains.png</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->attach('photo', __DIR__.'/photos/mountains.png');</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> The attach function requires the <code>Zip</code> PHP extension to be installed and enabled on your server.</p> </div> <h3 id="pressing-buttons"><a href="#pressing-buttons">Pressing Buttons</a></h3> <p>The <code>press</code> method may be used to click a button element on the page. The argument given to the <code>press</code> method may be either the display text of the button or a CSS / Dusk selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->press('Login');</div></code></pre> </div> <p>When submitting forms, many applications disable the form's submission button after it is pressed and then re-enable the button when the form submission's HTTP request is complete. To press a button and wait for the button to be re-enabled, you may use the <code>pressAndWaitFor</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Press the button and wait a maximum of 5 seconds for it to be enabled...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pressAndWaitFor</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Save</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Press the button and wait a maximum of 1 second for it to be enabled...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pressAndWaitFor</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Save</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Press the button and wait a maximum of 5 seconds for it to be enabled... $browser->pressAndWaitFor('Save'); // Press the button and wait a maximum of 1 second for it to be enabled... $browser->pressAndWaitFor('Save', 1);</div></code></pre> </div> <h3 id="clicking-links"><a href="#clicking-links">Clicking Links</a></h3> <p>To click a link, you may use the <code>clickLink</code> method on the browser instance. The <code>clickLink</code> method will click the link that has the given display text:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickLink</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$linkText</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->clickLink($linkText);</div></code></pre> </div> <p>You may use the <code>seeLink</code> method to determine if a link with the given display text is visible on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">if</span><span style="color: #BFC7D5;"> (</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">seeLink</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$linkText</span><span style="color: #BFC7D5;">)) {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> if ($browser->seeLink($linkText)) { // ... }</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> These methods interact with jQuery. If jQuery is not available on the page, Dusk will automatically inject it into the page so it is available for the test's duration.</p> </div> <h3 id="using-the-keyboard"><a href="#using-the-keyboard">Using the Keyboard</a></h3> <p>The <code>keys</code> method allows you to provide more complex input sequences to a given element than normally allowed by the <code>type</code> method. For example, you may instruct Dusk to hold modifier keys while entering values. In this example, the <code>shift</code> key will be held while <code>taylor</code> is entered into the element matching the given selector. After <code>taylor</code> is typed, <code>swift</code> will be typed without any modifier keys:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">keys</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">{shift}</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">], </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">swift</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->keys('selector', ['{shift}', 'taylor'], 'swift');</div></code></pre> </div> <p>Another valuable use case for the <code>keys</code> method is sending a "keyboard shortcut" combination to the primary CSS selector for your application:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">keys</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.app</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">{command}</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">j</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->keys('.app', ['{command}', 'j']);</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> All modifier keys such as <code>{command}</code> are wrapped in <code>{}</code> characters, and match the constants defined in the <code>Facebook\WebDriver\WebDriverKeys</code> class, which can be <a href="https://github.com/php-webdriver/php-webdriver/blob/master/lib/WebDriverKeys.php">found on GitHub</a>.</p> </div> <h4 id="fluent-keyboard-interactions"><a href="#fluent-keyboard-interactions">Fluent Keyboard Interactions</a></h4> <p>Dusk also provides a <code>withKeyboard</code> method, allowing you to fluently perform complex keyboard interactions via the <code>Laravel\Dusk\Keyboard</code> class. The <code>Keyboard</code> class provides <code>press</code>, <code>release</code>, <code>type</code>, and <code>pause</code> methods:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Keyboard</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">withKeyboard</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Keyboard</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$keyboard</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$keyboard</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">c</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pause</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">release</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">c</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">c</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">e</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">o</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Laravel\Dusk\Keyboard; $browser->withKeyboard(function (Keyboard $keyboard) { $keyboard->press('c') ->pause(1000) ->release('c') ->type(['c', 'e', 'o']); });</div></code></pre> </div> <h4 id="keyboard-macros"><a href="#keyboard-macros">Keyboard Macros</a></h4> <p>If you would like to define custom keyboard interactions that you can easily re-use throughout your test suite, you may use the <code>macro</code> method provided by the <code>Keyboard</code> class. Typically, you should call this method from a <a href="/docs/12.x/providers">service provider's</a> <code>boot</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Providers;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Facebook\WebDriver\</span><span style="color: #FFCB8B;">WebDriverKeys</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">ServiceProvider</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Keyboard</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">OperatingSystem</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">DuskServiceProvider</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">ServiceProvider</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #697098;"> * Register Dusk's browser macros.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Keyboard</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">macro</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">copy</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$element</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">null</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">([</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">OperatingSystem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">onMac</span><span style="color: #BFC7D5;">() </span><span style="color: #89DDFF;">?</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">WebDriverKeys</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">META</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">WebDriverKeys</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">CONTROL</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">c</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> ]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Keyboard</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">macro</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">paste</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$element</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">null</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">([</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">OperatingSystem</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">onMac</span><span style="color: #BFC7D5;">() </span><span style="color: #89DDFF;">?</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">WebDriverKeys</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">META</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">WebDriverKeys</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">CONTROL</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">v</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">28</span><span style="color: #BFC7D5;"> ]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">29</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">30</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">31</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">32</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">33</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace App\Providers; use Facebook\WebDriver\WebDriverKeys; use Illuminate\Support\ServiceProvider; use Laravel\Dusk\Keyboard; use Laravel\Dusk\OperatingSystem; class DuskServiceProvider extends ServiceProvider { /** * Register Dusk's browser macros. */ public function boot(): void { Keyboard::macro('copy', function (string $element = null) { $this->type([ OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'c', ]); return $this; }); Keyboard::macro('paste', function (string $element = null) { $this->type([ OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'v', ]); return $this; }); } }</div></code></pre> </div> <p>The <code>macro</code> function accepts a name as its first argument and a closure as its second. The macro's closure will be executed when calling the macro as a method on a <code>Keyboard</code> instance:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@textarea</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">withKeyboard</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">fn</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Keyboard</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$keyboard</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> => </span><span style="color: #BEC5D4;">$keyboard</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">copy</span><span style="color: #BFC7D5;">())</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@another-textarea</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">withKeyboard</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">fn</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Keyboard</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$keyboard</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> => </span><span style="color: #BEC5D4;">$keyboard</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">paste</span><span style="color: #BFC7D5;">());</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->click('@textarea') ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->copy()) ->click('@another-textarea') ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->paste());</div></code></pre> </div> <h3 id="using-the-mouse"><a href="#using-the-mouse">Using the Mouse</a></h3> <h4 id="clicking-on-elements"><a href="#clicking-on-elements">Clicking on Elements</a></h4> <p>The <code>click</code> method may be used to click on an element matching the given CSS or Dusk selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->click('.selector');</div></code></pre> </div> <p>The <code>clickAtXPath</code> method may be used to click on an element matching the given XPath expression:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickAtXPath</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">//div[@class = "selector"]</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->clickAtXPath('//div[@class = "selector"]');</div></code></pre> </div> <p>The <code>clickAtPoint</code> method may be used to click on the topmost element at a given pair of coordinates relative to the viewable area of the browser:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickAtPoint</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$x</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">0</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$y</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">0</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->clickAtPoint($x = 0, $y = 0);</div></code></pre> </div> <p>The <code>doubleClick</code> method may be used to simulate the double click of a mouse:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">doubleClick</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">doubleClick</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->doubleClick(); $browser->doubleClick('.selector');</div></code></pre> </div> <p>The <code>rightClick</code> method may be used to simulate the right click of a mouse:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">rightClick</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">rightClick</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->rightClick(); $browser->rightClick('.selector');</div></code></pre> </div> <p>The <code>clickAndHold</code> method may be used to simulate a mouse button being clicked and held down. A subsequent call to the <code>releaseMouse</code> method will undo this behavior and release the mouse button:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickAndHold</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickAndHold</span><span style="color: #BFC7D5;">()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pause</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">releaseMouse</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->clickAndHold('.selector'); $browser->clickAndHold() ->pause(1000) ->releaseMouse();</div></code></pre> </div> <p>The <code>controlClick</code> method may be used to simulate the <code>ctrl+click</code> event within the browser:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">controlClick</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">controlClick</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->controlClick(); $browser->controlClick('.selector');</div></code></pre> </div> <h4 id="mouseover"><a href="#mouseover">Mouseover</a></h4> <p>The <code>mouseover</code> method may be used when you need to move the mouse over an element matching the given CSS or Dusk selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">mouseover</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->mouseover('.selector');</div></code></pre> </div> <h4 id="drag-drop"><a href="#drag-drop">Drag and Drop</a></h4> <p>The <code>drag</code> method may be used to drag an element matching the given selector to another element:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">drag</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.from-selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.to-selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->drag('.from-selector', '.to-selector');</div></code></pre> </div> <p>Or, you may drag an element in a single direction:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">dragLeft</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$pixels</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">dragRight</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$pixels</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">dragUp</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$pixels</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">dragDown</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$pixels</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->dragLeft('.selector', $pixels = 10); $browser->dragRight('.selector', $pixels = 10); $browser->dragUp('.selector', $pixels = 10); $browser->dragDown('.selector', $pixels = 10);</div></code></pre> </div> <p>Finally, you may drag an element by a given offset:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">dragOffset</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$x</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$y</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->dragOffset('.selector', $x = 10, $y = 10);</div></code></pre> </div> <h3 id="javascript-dialogs"><a href="#javascript-dialogs">JavaScript Dialogs</a></h3> <p>Dusk provides various methods to interact with JavaScript Dialogs. For example, you may use the <code>waitForDialog</code> method to wait for a JavaScript dialog to appear. This method accepts an optional argument indicating how many seconds to wait for the dialog to appear:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForDialog</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$seconds</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">null</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->waitForDialog($seconds = null);</div></code></pre> </div> <p>The <code>assertDialogOpened</code> method may be used to assert that a dialog has been displayed and contains the given message:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDialogOpened</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Dialog message</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDialogOpened('Dialog message');</div></code></pre> </div> <p>If the JavaScript dialog contains a prompt, you may use the <code>typeInDialog</code> method to type a value into the prompt:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">typeInDialog</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->typeInDialog('Hello World');</div></code></pre> </div> <p>To close an open JavaScript dialog by clicking the "OK" button, you may invoke the <code>acceptDialog</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">acceptDialog</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->acceptDialog();</div></code></pre> </div> <p>To close an open JavaScript dialog by clicking the "Cancel" button, you may invoke the <code>dismissDialog</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">dismissDialog</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->dismissDialog();</div></code></pre> </div> <h3 id="interacting-with-iframes"><a href="#interacting-with-iframes">Interacting With Inline Frames</a></h3> <p>If you need to interact with elements within an iframe, you may use the <code>withinFrame</code> method. All element interactions that take place within the closure provided to the <code>withinFrame</code> method will be scoped to the context of the specified iframe:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">withinFrame</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#credit-card-details</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">input[name="cardnumber"]</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">4242424242424242</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">input[name="exp-date"]</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">1224</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">input[name="cvc"]</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">123</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Pay</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->withinFrame('#credit-card-details', function ($browser) { $browser->type('input[name="cardnumber"]', '4242424242424242') ->type('input[name="exp-date"]', '1224') ->type('input[name="cvc"]', '123') ->press('Pay'); });</div></code></pre> </div> <h3 id="scoping-selectors"><a href="#scoping-selectors">Scoping Selectors</a></h3> <p>Sometimes you may wish to perform several operations while scoping all of the operations within a given selector. For example, you may wish to assert that some text exists only within a table and then click a button within that table. You may use the <code>with</code> method to accomplish this. All operations performed within the closure given to the <code>with</code> method will be scoped to the original selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">with</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.table</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$table</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$table</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickLink</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Delete</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->with('.table', function (Browser $table) { $table->assertSee('Hello World') ->clickLink('Delete'); });</div></code></pre> </div> <p>You may occasionally need to execute assertions outside of the current scope. You may use the <code>elsewhere</code> and <code>elsewhereWhenAvailable</code> methods to accomplish this:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">with</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.table</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$table</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Current scope is `body .table`...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">elsewhere</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.page-title</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$title</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Current scope is `body .page-title`...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$title</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">elsewhereWhenAvailable</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.page-title</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$title</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Current scope is `body .page-title`...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$title</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->with('.table', function (Browser $table) { // Current scope is `body .table`... $browser->elsewhere('.page-title', function (Browser $title) { // Current scope is `body .page-title`... $title->assertSee('Hello World'); }); $browser->elsewhereWhenAvailable('.page-title', function (Browser $title) { // Current scope is `body .page-title`... $title->assertSee('Hello World'); }); });</div></code></pre> </div> <h3 id="waiting-for-elements"><a href="#waiting-for-elements">Waiting for Elements</a></h3> <p>When testing applications that use JavaScript extensively, it often becomes necessary to "wait" for certain elements or data to be available before proceeding with a test. Dusk makes this a cinch. Using a variety of methods, you may wait for elements to become visible on the page or even wait until a given JavaScript expression evaluates to <code>true</code>.</p> <h4 id="waiting"><a href="#waiting">Waiting</a></h4> <p>If you just need to pause the test for a given number of milliseconds, use the <code>pause</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pause</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->pause(1000);</div></code></pre> </div> <p>If you need to pause the test only if a given condition is <code>true</code>, use the <code>pauseIf</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pauseIf</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">App</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">environment</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">production</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">), </span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->pauseIf(App::environment('production'), 1000);</div></code></pre> </div> <p>Likewise, if you need to pause the test unless a given condition is <code>true</code>, you may use the <code>pauseUnless</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pauseUnless</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">App</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">environment</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">testing</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">), </span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->pauseUnless(App::environment('testing'), 1000);</div></code></pre> </div> <h4 id="waiting-for-selectors"><a href="#waiting-for-selectors">Waiting for Selectors</a></h4> <p>The <code>waitFor</code> method may be used to pause the execution of the test until the element matching the given CSS or Dusk selector is displayed on the page. By default, this will pause the test for a maximum of five seconds before throwing an exception. If necessary, you may pass a custom timeout threshold as the second argument to the method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds for the selector...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitFor</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second for the selector...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitFor</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds for the selector... $browser->waitFor('.selector'); // Wait a maximum of one second for the selector... $browser->waitFor('.selector', 1);</div></code></pre> </div> <p>You may also wait until the element matching the given selector contains the given text:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds for the selector to contain the given text...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForTextIn</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second for the selector to contain the given text...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForTextIn</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds for the selector to contain the given text... $browser->waitForTextIn('.selector', 'Hello World'); // Wait a maximum of one second for the selector to contain the given text... $browser->waitForTextIn('.selector', 'Hello World', 1);</div></code></pre> </div> <p>You may also wait until the element matching the given selector is missing from the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds until the selector is missing...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second until the selector is missing...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds until the selector is missing... $browser->waitUntilMissing('.selector'); // Wait a maximum of one second until the selector is missing... $browser->waitUntilMissing('.selector', 1);</div></code></pre> </div> <p>Or, you may wait until the element matching the given selector is enabled or disabled:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds until the selector is enabled...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilEnabled</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second until the selector is enabled...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilEnabled</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds until the selector is disabled...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilDisabled</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second until the selector is disabled...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilDisabled</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds until the selector is enabled... $browser->waitUntilEnabled('.selector'); // Wait a maximum of one second until the selector is enabled... $browser->waitUntilEnabled('.selector', 1); // Wait a maximum of five seconds until the selector is disabled... $browser->waitUntilDisabled('.selector'); // Wait a maximum of one second until the selector is disabled... $browser->waitUntilDisabled('.selector', 1);</div></code></pre> </div> <h4 id="scoping-selectors-when-available"><a href="#scoping-selectors-when-available">Scoping Selectors When Available</a></h4> <p>Occasionally, you may wish to wait for an element to appear that matches a given selector and then interact with the element. For example, you may wish to wait until a modal window is available and then press the "OK" button within the modal. The <code>whenAvailable</code> method may be used to accomplish this. All element operations performed within the given closure will be scoped to the original selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">whenAvailable</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.modal</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$modal</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$modal</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">OK</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->whenAvailable('.modal', function (Browser $modal) { $modal->assertSee('Hello World') ->press('OK'); });</div></code></pre> </div> <h4 id="waiting-for-text"><a href="#waiting-for-text">Waiting for Text</a></h4> <p>The <code>waitForText</code> method may be used to wait until the given text is displayed on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds for the text...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForText</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second for the text...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForText</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds for the text... $browser->waitForText('Hello World'); // Wait a maximum of one second for the text... $browser->waitForText('Hello World', 1);</div></code></pre> </div> <p>You may use the <code>waitUntilMissingText</code> method to wait until the displayed text has been removed from the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds for the text to be removed...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilMissingText</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second for the text to be removed...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilMissingText</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello World</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds for the text to be removed... $browser->waitUntilMissingText('Hello World'); // Wait a maximum of one second for the text to be removed... $browser->waitUntilMissingText('Hello World', 1);</div></code></pre> </div> <h4 id="waiting-for-links"><a href="#waiting-for-links">Waiting for Links</a></h4> <p>The <code>waitForLink</code> method may be used to wait until the given link text is displayed on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds for the link...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForLink</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Create</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second for the link...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForLink</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Create</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds for the link... $browser->waitForLink('Create'); // Wait a maximum of one second for the link... $browser->waitForLink('Create', 1);</div></code></pre> </div> <h4 id="waiting-for-inputs"><a href="#waiting-for-inputs">Waiting for Inputs</a></h4> <p>The <code>waitForInput</code> method may be used to wait until the given input field is visible on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds for the input...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForInput</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second for the input...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForInput</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds for the input... $browser->waitForInput($field); // Wait a maximum of one second for the input... $browser->waitForInput($field, 1);</div></code></pre> </div> <h4 id="waiting-on-the-page-location"><a href="#waiting-on-the-page-location">Waiting on the Page Location</a></h4> <p>When making a path assertion such as <code>$browser->assertPathIs('/home')</code>, the assertion can fail if <code>window.location.pathname</code> is being updated asynchronously. You may use the <code>waitForLocation</code> method to wait for the location to be a given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForLocation</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/secret</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->waitForLocation('/secret');</div></code></pre> </div> <p>The <code>waitForLocation</code> method can also be used to wait for the current window location to be a fully qualified URL:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForLocation</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">https://example.com/path</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->waitForLocation('https://example.com/path');</div></code></pre> </div> <p>You may also wait for a <a href="/docs/12.x/routing#named-routes">named route's</a> location:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForRoute</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$routeName</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$parameters</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->waitForRoute($routeName, $parameters);</div></code></pre> </div> <h4 id="waiting-for-page-reloads"><a href="#waiting-for-page-reloads">Waiting for Page Reloads</a></h4> <p>If you need to wait for a page to reload after performing an action, use the <code>waitForReload</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForReload</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Submit</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">})</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Success!</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Laravel\Dusk\Browser; $browser->waitForReload(function (Browser $browser) { $browser->press('Submit'); }) ->assertSee('Success!');</div></code></pre> </div> <p>Since the need to wait for the page to reload typically occurs after clicking a button, you may use the <code>clickAndWaitForReload</code> method for convenience:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickAndWaitForReload</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">something</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->clickAndWaitForReload('.selector') ->assertSee('something');</div></code></pre> </div> <h4 id="waiting-on-javascript-expressions"><a href="#waiting-on-javascript-expressions">Waiting on JavaScript Expressions</a></h4> <p>Sometimes you may wish to pause the execution of a test until a given JavaScript expression evaluates to <code>true</code>. You may easily accomplish this using the <code>waitUntil</code> method. When passing an expression to this method, you do not need to include the <code>return</code> keyword or an ending semi-colon:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds for the expression to be true...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntil</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">App.data.servers.length > 0</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of one second for the expression to be true...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntil</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">App.data.servers.length > 0</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait a maximum of five seconds for the expression to be true... $browser->waitUntil('App.data.servers.length > 0'); // Wait a maximum of one second for the expression to be true... $browser->waitUntil('App.data.servers.length > 0', 1);</div></code></pre> </div> <h4 id="waiting-on-vue-expressions"><a href="#waiting-on-vue-expressions">Waiting on Vue Expressions</a></h4> <p>The <code>waitUntilVue</code> and <code>waitUntilVueIsNot</code> methods may be used to wait until a <a href="https://vuejs.org">Vue component</a> attribute has a given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait until the component attribute contains the given value...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilVue</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@user</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait until the component attribute doesn't contain the given value...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUntilVueIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #82AAFF;">null</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@user</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait until the component attribute contains the given value... $browser->waitUntilVue('user.name', 'Taylor', '@user'); // Wait until the component attribute doesn't contain the given value... $browser->waitUntilVueIsNot('user.name', null, '@user');</div></code></pre> </div> <h4 id="waiting-for-javascript-events"><a href="#waiting-for-javascript-events">Waiting for JavaScript Events</a></h4> <p>The <code>waitForEvent</code> method can be used to pause the execution of a test until a JavaScript event occurs:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForEvent</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">load</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->waitForEvent('load');</div></code></pre> </div> <p>The event listener is attached to the current scope, which is the <code>body</code> element by default. When using a scoped selector, the event listener will be attached to the matching element:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">with</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">iframe</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$iframe</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait for the iframe's load event...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$iframe</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForEvent</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">load</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->with('iframe', function (Browser $iframe) { // Wait for the iframe's load event... $iframe->waitForEvent('load'); });</div></code></pre> </div> <p>You may also provide a selector as the second argument to the <code>waitForEvent</code> method to attach the event listener to a specific element:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForEvent</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">load</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->waitForEvent('load', '.selector');</div></code></pre> </div> <p>You may also wait for events on the <code>document</code> and <code>window</code> objects:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait until the document is scrolled...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForEvent</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scroll</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">document</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">//</span><span style="color: #697098;"> Wait a maximum of five seconds until the window is resized...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitForEvent</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">resize</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">window</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">5</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // Wait until the document is scrolled... $browser->waitForEvent('scroll', 'document'); // Wait a maximum of five seconds until the window is resized... $browser->waitForEvent('resize', 'window', 5);</div></code></pre> </div> <h4 id="waiting-with-a-callback"><a href="#waiting-with-a-callback">Waiting With a Callback</a></h4> <p>Many of the "wait" methods in Dusk rely on the underlying <code>waitUsing</code> method. You may use this method directly to wait for a given closure to return <code>true</code>. The <code>waitUsing</code> method accepts the maximum number of seconds to wait, the interval at which the closure should be evaluated, the closure, and an optional failure message:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">waitUsing</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$something</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$something</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isReady</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;">}, </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">Something wasn't ready in time.</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->waitUsing(10, 1, function () use ($something) { return $something->isReady(); }, "Something wasn't ready in time.");</div></code></pre> </div> <h3 id="scrolling-an-element-into-view"><a href="#scrolling-an-element-into-view">Scrolling an Element Into View</a></h3> <p>Sometimes you may not be able to click on an element because it is outside of the viewable area of the browser. The <code>scrollIntoView</code> method will scroll the browser window until the element at the given selector is within the view:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">scrollIntoView</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->scrollIntoView('.selector') ->click('.selector');</div></code></pre> </div> <h2 id="available-assertions"><a href="#available-assertions">Available Assertions</a></h2> <p>Dusk provides a variety of assertions that you may make against your application. All of the available assertions are documented in the list below:</p> <style> .collection-method-list > p { columns: 10.8em 3; -moz-columns: 10.8em 3; -webkit-columns: 10.8em 3; } .collection-method-list a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <div class="collection-method-list" markdown="1"> <p><a href="#assert-title">assertTitle</a> <a href="#assert-title-contains">assertTitleContains</a> <a href="#assert-url-is">assertUrlIs</a> <a href="#assert-scheme-is">assertSchemeIs</a> <a href="#assert-scheme-is-not">assertSchemeIsNot</a> <a href="#assert-host-is">assertHostIs</a> <a href="#assert-host-is-not">assertHostIsNot</a> <a href="#assert-port-is">assertPortIs</a> <a href="#assert-port-is-not">assertPortIsNot</a> <a href="#assert-path-begins-with">assertPathBeginsWith</a> <a href="#assert-path-ends-with">assertPathEndsWith</a> <a href="#assert-path-contains">assertPathContains</a> <a href="#assert-path-is">assertPathIs</a> <a href="#assert-path-is-not">assertPathIsNot</a> <a href="#assert-route-is">assertRouteIs</a> <a href="#assert-query-string-has">assertQueryStringHas</a> <a href="#assert-query-string-missing">assertQueryStringMissing</a> <a href="#assert-fragment-is">assertFragmentIs</a> <a href="#assert-fragment-begins-with">assertFragmentBeginsWith</a> <a href="#assert-fragment-is-not">assertFragmentIsNot</a> <a href="#assert-has-cookie">assertHasCookie</a> <a href="#assert-has-plain-cookie">assertHasPlainCookie</a> <a href="#assert-cookie-missing">assertCookieMissing</a> <a href="#assert-plain-cookie-missing">assertPlainCookieMissing</a> <a href="#assert-cookie-value">assertCookieValue</a> <a href="#assert-plain-cookie-value">assertPlainCookieValue</a> <a href="#assert-see">assertSee</a> <a href="#assert-dont-see">assertDontSee</a> <a href="#assert-see-in">assertSeeIn</a> <a href="#assert-dont-see-in">assertDontSeeIn</a> <a href="#assert-see-anything-in">assertSeeAnythingIn</a> <a href="#assert-see-nothing-in">assertSeeNothingIn</a> <a href="#assert-script">assertScript</a> <a href="#assert-source-has">assertSourceHas</a> <a href="#assert-source-missing">assertSourceMissing</a> <a href="#assert-see-link">assertSeeLink</a> <a href="#assert-dont-see-link">assertDontSeeLink</a> <a href="#assert-input-value">assertInputValue</a> <a href="#assert-input-value-is-not">assertInputValueIsNot</a> <a href="#assert-checked">assertChecked</a> <a href="#assert-not-checked">assertNotChecked</a> <a href="#assert-indeterminate">assertIndeterminate</a> <a href="#assert-radio-selected">assertRadioSelected</a> <a href="#assert-radio-not-selected">assertRadioNotSelected</a> <a href="#assert-selected">assertSelected</a> <a href="#assert-not-selected">assertNotSelected</a> <a href="#assert-select-has-options">assertSelectHasOptions</a> <a href="#assert-select-missing-options">assertSelectMissingOptions</a> <a href="#assert-select-has-option">assertSelectHasOption</a> <a href="#assert-select-missing-option">assertSelectMissingOption</a> <a href="#assert-value">assertValue</a> <a href="#assert-value-is-not">assertValueIsNot</a> <a href="#assert-attribute">assertAttribute</a> <a href="#assert-attribute-missing">assertAttributeMissing</a> <a href="#assert-attribute-contains">assertAttributeContains</a> <a href="#assert-attribute-doesnt-contain">assertAttributeDoesntContain</a> <a href="#assert-aria-attribute">assertAriaAttribute</a> <a href="#assert-data-attribute">assertDataAttribute</a> <a href="#assert-visible">assertVisible</a> <a href="#assert-present">assertPresent</a> <a href="#assert-not-present">assertNotPresent</a> <a href="#assert-missing">assertMissing</a> <a href="#assert-input-present">assertInputPresent</a> <a href="#assert-input-missing">assertInputMissing</a> <a href="#assert-dialog-opened">assertDialogOpened</a> <a href="#assert-enabled">assertEnabled</a> <a href="#assert-disabled">assertDisabled</a> <a href="#assert-button-enabled">assertButtonEnabled</a> <a href="#assert-button-disabled">assertButtonDisabled</a> <a href="#assert-focused">assertFocused</a> <a href="#assert-not-focused">assertNotFocused</a> <a href="#assert-authenticated">assertAuthenticated</a> <a href="#assert-guest">assertGuest</a> <a href="#assert-authenticated-as">assertAuthenticatedAs</a> <a href="#assert-vue">assertVue</a> <a href="#assert-vue-is-not">assertVueIsNot</a> <a href="#assert-vue-contains">assertVueContains</a> <a href="#assert-vue-doesnt-contain">assertVueDoesntContain</a></p> </div> <h4 id="assert-title"><a href="#assert-title">assertTitle</a></h4> <p>Assert that the page title matches the given text:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertTitle</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$title</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertTitle($title);</div></code></pre> </div> <h4 id="assert-title-contains"><a href="#assert-title-contains">assertTitleContains</a></h4> <p>Assert that the page title contains the given text:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertTitleContains</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$title</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertTitleContains($title);</div></code></pre> </div> <h4 id="assert-url-is"><a href="#assert-url-is">assertUrlIs</a></h4> <p>Assert that the current URL (without the query string) matches the given string:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertUrlIs</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$url</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertUrlIs($url);</div></code></pre> </div> <h4 id="assert-scheme-is"><a href="#assert-scheme-is">assertSchemeIs</a></h4> <p>Assert that the current URL scheme matches the given scheme:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSchemeIs</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$scheme</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSchemeIs($scheme);</div></code></pre> </div> <h4 id="assert-scheme-is-not"><a href="#assert-scheme-is-not">assertSchemeIsNot</a></h4> <p>Assert that the current URL scheme does not match the given scheme:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSchemeIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$scheme</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSchemeIsNot($scheme);</div></code></pre> </div> <h4 id="assert-host-is"><a href="#assert-host-is">assertHostIs</a></h4> <p>Assert that the current URL host matches the given host:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertHostIs</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$host</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertHostIs($host);</div></code></pre> </div> <h4 id="assert-host-is-not"><a href="#assert-host-is-not">assertHostIsNot</a></h4> <p>Assert that the current URL host does not match the given host:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertHostIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$host</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertHostIsNot($host);</div></code></pre> </div> <h4 id="assert-port-is"><a href="#assert-port-is">assertPortIs</a></h4> <p>Assert that the current URL port matches the given port:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPortIs</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$port</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPortIs($port);</div></code></pre> </div> <h4 id="assert-port-is-not"><a href="#assert-port-is-not">assertPortIsNot</a></h4> <p>Assert that the current URL port does not match the given port:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPortIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$port</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPortIsNot($port);</div></code></pre> </div> <h4 id="assert-path-begins-with"><a href="#assert-path-begins-with">assertPathBeginsWith</a></h4> <p>Assert that the current URL path begins with the given path:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathBeginsWith</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPathBeginsWith('/home');</div></code></pre> </div> <h4 id="assert-path-ends-with"><a href="#assert-path-ends-with">assertPathEndsWith</a></h4> <p>Assert that the current URL path ends with the given path:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathEndsWith</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPathEndsWith('/home');</div></code></pre> </div> <h4 id="assert-path-contains"><a href="#assert-path-contains">assertPathContains</a></h4> <p>Assert that the current URL path contains the given path:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathContains</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPathContains('/home');</div></code></pre> </div> <h4 id="assert-path-is"><a href="#assert-path-is">assertPathIs</a></h4> <p>Assert that the current path matches the given path:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathIs</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPathIs('/home');</div></code></pre> </div> <h4 id="assert-path-is-not"><a href="#assert-path-is-not">assertPathIsNot</a></h4> <p>Assert that the current path does not match the given path:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/home</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPathIsNot('/home');</div></code></pre> </div> <h4 id="assert-route-is"><a href="#assert-route-is">assertRouteIs</a></h4> <p>Assert that the current URL matches the given <a href="/docs/12.x/routing#named-routes">named route's</a> URL:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertRouteIs</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$parameters</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertRouteIs($name, $parameters);</div></code></pre> </div> <h4 id="assert-query-string-has"><a href="#assert-query-string-has">assertQueryStringHas</a></h4> <p>Assert that the given query string parameter is present:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertQueryStringHas</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertQueryStringHas($name);</div></code></pre> </div> <p>Assert that the given query string parameter is present and has a given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertQueryStringHas</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertQueryStringHas($name, $value);</div></code></pre> </div> <h4 id="assert-query-string-missing"><a href="#assert-query-string-missing">assertQueryStringMissing</a></h4> <p>Assert that the given query string parameter is missing:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertQueryStringMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertQueryStringMissing($name);</div></code></pre> </div> <h4 id="assert-fragment-is"><a href="#assert-fragment-is">assertFragmentIs</a></h4> <p>Assert that the URL's current hash fragment matches the given fragment:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertFragmentIs</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">anchor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertFragmentIs('anchor');</div></code></pre> </div> <h4 id="assert-fragment-begins-with"><a href="#assert-fragment-begins-with">assertFragmentBeginsWith</a></h4> <p>Assert that the URL's current hash fragment begins with the given fragment:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertFragmentBeginsWith</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">anchor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertFragmentBeginsWith('anchor');</div></code></pre> </div> <h4 id="assert-fragment-is-not"><a href="#assert-fragment-is-not">assertFragmentIsNot</a></h4> <p>Assert that the URL's current hash fragment does not match the given fragment:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertFragmentIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">anchor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertFragmentIsNot('anchor');</div></code></pre> </div> <h4 id="assert-has-cookie"><a href="#assert-has-cookie">assertHasCookie</a></h4> <p>Assert that the given encrypted cookie is present:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertHasCookie</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertHasCookie($name);</div></code></pre> </div> <h4 id="assert-has-plain-cookie"><a href="#assert-has-plain-cookie">assertHasPlainCookie</a></h4> <p>Assert that the given unencrypted cookie is present:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertHasPlainCookie</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertHasPlainCookie($name);</div></code></pre> </div> <h4 id="assert-cookie-missing"><a href="#assert-cookie-missing">assertCookieMissing</a></h4> <p>Assert that the given encrypted cookie is not present:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertCookieMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertCookieMissing($name);</div></code></pre> </div> <h4 id="assert-plain-cookie-missing"><a href="#assert-plain-cookie-missing">assertPlainCookieMissing</a></h4> <p>Assert that the given unencrypted cookie is not present:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPlainCookieMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPlainCookieMissing($name);</div></code></pre> </div> <h4 id="assert-cookie-value"><a href="#assert-cookie-value">assertCookieValue</a></h4> <p>Assert that an encrypted cookie has a given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertCookieValue</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertCookieValue($name, $value);</div></code></pre> </div> <h4 id="assert-plain-cookie-value"><a href="#assert-plain-cookie-value">assertPlainCookieValue</a></h4> <p>Assert that an unencrypted cookie has a given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPlainCookieValue</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPlainCookieValue($name, $value);</div></code></pre> </div> <h4 id="assert-see"><a href="#assert-see">assertSee</a></h4> <p>Assert that the given text is present on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$text</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSee($text);</div></code></pre> </div> <h4 id="assert-dont-see"><a href="#assert-dont-see">assertDontSee</a></h4> <p>Assert that the given text is not present on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDontSee</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$text</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDontSee($text);</div></code></pre> </div> <h4 id="assert-see-in"><a href="#assert-see-in">assertSeeIn</a></h4> <p>Assert that the given text is present within the selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSeeIn</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$text</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSeeIn($selector, $text);</div></code></pre> </div> <h4 id="assert-dont-see-in"><a href="#assert-dont-see-in">assertDontSeeIn</a></h4> <p>Assert that the given text is not present within the selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDontSeeIn</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$text</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDontSeeIn($selector, $text);</div></code></pre> </div> <h4 id="assert-see-anything-in"><a href="#assert-see-anything-in">assertSeeAnythingIn</a></h4> <p>Assert that any text is present within the selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSeeAnythingIn</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSeeAnythingIn($selector);</div></code></pre> </div> <h4 id="assert-see-nothing-in"><a href="#assert-see-nothing-in">assertSeeNothingIn</a></h4> <p>Assert that no text is present within the selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSeeNothingIn</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSeeNothingIn($selector);</div></code></pre> </div> <h4 id="assert-script"><a href="#assert-script">assertScript</a></h4> <p>Assert that the given JavaScript expression evaluates to the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertScript</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">window.isLoaded</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertScript</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">document.readyState</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">complete</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertScript('window.isLoaded') ->assertScript('document.readyState', 'complete');</div></code></pre> </div> <h4 id="assert-source-has"><a href="#assert-source-has">assertSourceHas</a></h4> <p>Assert that the given source code is present on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSourceHas</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$code</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSourceHas($code);</div></code></pre> </div> <h4 id="assert-source-missing"><a href="#assert-source-missing">assertSourceMissing</a></h4> <p>Assert that the given source code is not present on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSourceMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$code</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSourceMissing($code);</div></code></pre> </div> <h4 id="assert-see-link"><a href="#assert-see-link">assertSeeLink</a></h4> <p>Assert that the given link is present on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSeeLink</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$linkText</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSeeLink($linkText);</div></code></pre> </div> <h4 id="assert-dont-see-link"><a href="#assert-dont-see-link">assertDontSeeLink</a></h4> <p>Assert that the given link is not present on the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDontSeeLink</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$linkText</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDontSeeLink($linkText);</div></code></pre> </div> <h4 id="assert-input-value"><a href="#assert-input-value">assertInputValue</a></h4> <p>Assert that the given input field has the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertInputValue</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertInputValue($field, $value);</div></code></pre> </div> <h4 id="assert-input-value-is-not"><a href="#assert-input-value-is-not">assertInputValueIsNot</a></h4> <p>Assert that the given input field does not have the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertInputValueIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertInputValueIsNot($field, $value);</div></code></pre> </div> <h4 id="assert-checked"><a href="#assert-checked">assertChecked</a></h4> <p>Assert that the given checkbox is checked:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertChecked</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertChecked($field);</div></code></pre> </div> <h4 id="assert-not-checked"><a href="#assert-not-checked">assertNotChecked</a></h4> <p>Assert that the given checkbox is not checked:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertNotChecked</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertNotChecked($field);</div></code></pre> </div> <h4 id="assert-indeterminate"><a href="#assert-indeterminate">assertIndeterminate</a></h4> <p>Assert that the given checkbox is in an indeterminate state:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertIndeterminate</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertIndeterminate($field);</div></code></pre> </div> <h4 id="assert-radio-selected"><a href="#assert-radio-selected">assertRadioSelected</a></h4> <p>Assert that the given radio field is selected:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertRadioSelected</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertRadioSelected($field, $value);</div></code></pre> </div> <h4 id="assert-radio-not-selected"><a href="#assert-radio-not-selected">assertRadioNotSelected</a></h4> <p>Assert that the given radio field is not selected:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertRadioNotSelected</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertRadioNotSelected($field, $value);</div></code></pre> </div> <h4 id="assert-selected"><a href="#assert-selected">assertSelected</a></h4> <p>Assert that the given dropdown has the given value selected:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSelected</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSelected($field, $value);</div></code></pre> </div> <h4 id="assert-not-selected"><a href="#assert-not-selected">assertNotSelected</a></h4> <p>Assert that the given dropdown does not have the given value selected:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertNotSelected</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertNotSelected($field, $value);</div></code></pre> </div> <h4 id="assert-select-has-options"><a href="#assert-select-has-options">assertSelectHasOptions</a></h4> <p>Assert that the given array of values are available to be selected:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSelectHasOptions</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$values</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSelectHasOptions($field, $values);</div></code></pre> </div> <h4 id="assert-select-missing-options"><a href="#assert-select-missing-options">assertSelectMissingOptions</a></h4> <p>Assert that the given array of values are not available to be selected:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSelectMissingOptions</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$values</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSelectMissingOptions($field, $values);</div></code></pre> </div> <h4 id="assert-select-has-option"><a href="#assert-select-has-option">assertSelectHasOption</a></h4> <p>Assert that the given value is available to be selected on the given field:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSelectHasOption</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSelectHasOption($field, $value);</div></code></pre> </div> <h4 id="assert-select-missing-option"><a href="#assert-select-missing-option">assertSelectMissingOption</a></h4> <p>Assert that the given value is not available to be selected:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSelectMissingOption</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertSelectMissingOption($field, $value);</div></code></pre> </div> <h4 id="assert-value"><a href="#assert-value">assertValue</a></h4> <p>Assert that the element matching the given selector has the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertValue</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertValue($selector, $value);</div></code></pre> </div> <h4 id="assert-value-is-not"><a href="#assert-value-is-not">assertValueIsNot</a></h4> <p>Assert that the element matching the given selector does not have the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertValueIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertValueIsNot($selector, $value);</div></code></pre> </div> <h4 id="assert-attribute"><a href="#assert-attribute">assertAttribute</a></h4> <p>Assert that the element matching the given selector has the given value in the provided attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAttribute</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$attribute</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAttribute($selector, $attribute, $value);</div></code></pre> </div> <h4 id="assert-attribute-missing"><a href="#assert-attribute-missing">assertAttributeMissing</a></h4> <p>Assert that the element matching the given selector is missing the provided attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAttributeMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$attribute</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAttributeMissing($selector, $attribute);</div></code></pre> </div> <h4 id="assert-attribute-contains"><a href="#assert-attribute-contains">assertAttributeContains</a></h4> <p>Assert that the element matching the given selector contains the given value in the provided attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAttributeContains</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$attribute</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAttributeContains($selector, $attribute, $value);</div></code></pre> </div> <h4 id="assert-attribute-doesnt-contain"><a href="#assert-attribute-doesnt-contain">assertAttributeDoesntContain</a></h4> <p>Assert that the element matching the given selector does not contain the given value in the provided attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAttributeDoesntContain</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$attribute</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAttributeDoesntContain($selector, $attribute, $value);</div></code></pre> </div> <h4 id="assert-aria-attribute"><a href="#assert-aria-attribute">assertAriaAttribute</a></h4> <p>Assert that the element matching the given selector has the given value in the provided aria attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAriaAttribute</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$attribute</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAriaAttribute($selector, $attribute, $value);</div></code></pre> </div> <p>For example, given the markup <code><button aria-label="Add"></button></code>, you may assert against the <code>aria-label</code> attribute like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAriaAttribute</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">button</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">label</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Add</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAriaAttribute('button', 'label', 'Add')</div></code></pre> </div> <h4 id="assert-data-attribute"><a href="#assert-data-attribute">assertDataAttribute</a></h4> <p>Assert that the element matching the given selector has the given value in the provided data attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDataAttribute</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$attribute</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDataAttribute($selector, $attribute, $value);</div></code></pre> </div> <p>For example, given the markup <code><tr id="row-1" data-content="attendees"></tr></code>, you may assert against the <code>data-label</code> attribute like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDataAttribute</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#row-1</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">content</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">attendees</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDataAttribute('#row-1', 'content', 'attendees')</div></code></pre> </div> <h4 id="assert-visible"><a href="#assert-visible">assertVisible</a></h4> <p>Assert that the element matching the given selector is visible:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertVisible</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertVisible($selector);</div></code></pre> </div> <h4 id="assert-present"><a href="#assert-present">assertPresent</a></h4> <p>Assert that the element matching the given selector is present in the source:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPresent</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertPresent($selector);</div></code></pre> </div> <h4 id="assert-not-present"><a href="#assert-not-present">assertNotPresent</a></h4> <p>Assert that the element matching the given selector is not present in the source:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertNotPresent</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertNotPresent($selector);</div></code></pre> </div> <h4 id="assert-missing"><a href="#assert-missing">assertMissing</a></h4> <p>Assert that the element matching the given selector is not visible:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$selector</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertMissing($selector);</div></code></pre> </div> <h4 id="assert-input-present"><a href="#assert-input-present">assertInputPresent</a></h4> <p>Assert that an input with the given name is present:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertInputPresent</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertInputPresent($name);</div></code></pre> </div> <h4 id="assert-input-missing"><a href="#assert-input-missing">assertInputMissing</a></h4> <p>Assert that an input with the given name is not present in the source:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertInputMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertInputMissing($name);</div></code></pre> </div> <h4 id="assert-dialog-opened"><a href="#assert-dialog-opened">assertDialogOpened</a></h4> <p>Assert that a JavaScript dialog with the given message has been opened:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDialogOpened</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDialogOpened($message);</div></code></pre> </div> <h4 id="assert-enabled"><a href="#assert-enabled">assertEnabled</a></h4> <p>Assert that the given field is enabled:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertEnabled</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertEnabled($field);</div></code></pre> </div> <h4 id="assert-disabled"><a href="#assert-disabled">assertDisabled</a></h4> <p>Assert that the given field is disabled:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertDisabled</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertDisabled($field);</div></code></pre> </div> <h4 id="assert-button-enabled"><a href="#assert-button-enabled">assertButtonEnabled</a></h4> <p>Assert that the given button is enabled:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertButtonEnabled</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$button</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertButtonEnabled($button);</div></code></pre> </div> <h4 id="assert-button-disabled"><a href="#assert-button-disabled">assertButtonDisabled</a></h4> <p>Assert that the given button is disabled:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertButtonDisabled</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$button</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertButtonDisabled($button);</div></code></pre> </div> <h4 id="assert-focused"><a href="#assert-focused">assertFocused</a></h4> <p>Assert that the given field is focused:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertFocused</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertFocused($field);</div></code></pre> </div> <h4 id="assert-not-focused"><a href="#assert-not-focused">assertNotFocused</a></h4> <p>Assert that the given field is not focused:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertNotFocused</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$field</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertNotFocused($field);</div></code></pre> </div> <h4 id="assert-authenticated"><a href="#assert-authenticated">assertAuthenticated</a></h4> <p>Assert that the user is authenticated:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAuthenticated</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAuthenticated();</div></code></pre> </div> <h4 id="assert-guest"><a href="#assert-guest">assertGuest</a></h4> <p>Assert that the user is not authenticated:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertGuest</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertGuest();</div></code></pre> </div> <h4 id="assert-authenticated-as"><a href="#assert-authenticated-as">assertAuthenticatedAs</a></h4> <p>Assert that the user is authenticated as the given user:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertAuthenticatedAs</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertAuthenticatedAs($user);</div></code></pre> </div> <h4 id="assert-vue"><a href="#assert-vue">assertVue</a></h4> <p>Dusk even allows you to make assertions on the state of <a href="https://vuejs.org">Vue component</a> data. For example, imagine your application contains the following Vue component:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">//</span><span style="color: #697098;"> HTML...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;"><</span><span style="color: #82AAFF;">profile</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">dusk</span><span style="color: #C792EA;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">profile-component</span><span style="color: #D9F5DD;">"</span><span style="color: #C792EA;">><</span><span style="color: #89DDFF;">/</span><span style="color: #82AAFF;">profile</span><span style="color: #C792EA;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;">//</span><span style="color: #697098;"> Component Definition...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #82AAFF;">Vue</span><span style="color: #89DDFF;">.</span><span style="color: #82AAFF;">component</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">profile</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #82AAFF;"> template: </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;"><div>{{ user.name }}</div></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #82AAFF;"> data: </span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">return</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #82AAFF;"> user: </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #82AAFF;"> name: </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Taylor</span><span style="color: #D9F5DD;">'</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">};</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // HTML... <profile dusk="profile-component"></profile> // Component Definition... Vue.component('profile', { template: '<div>{{ user.name }}</div>', data: function () { return { user: { name: 'Taylor' } }; } });</div></code></pre> <p>You may assert on the state of the Vue component like so:</p> <div class="tabbed-code" data-group="1df3cf502597c6d6b58a6e0bfc806498"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Pest" onClick="setTab('Pest', '1df3cf502597c6d6b58a6e0bfc806498')">Pest</button> <button class="tabbed-code-nav-button" data-tab="PHPUnit" onClick="setTab('PHPUnit', '1df3cf502597c6d6b58a6e0bfc806498')">PHPUnit</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Pest"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">test</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">vue</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #FF5572;">this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #D9F5DD;">)</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertVue</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@profile-component</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">});</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> test('vue', function () { $this->browse(function (Browser $browser) { $browser->visit('/') ->assertVue('user.name', 'Taylor', '@profile-component'); }); });</div></code></pre> </div> <div class="code-container" data-tab="PHPUnit"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #697098;"> * A basic Vue test example.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">test_vue</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertVue</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Taylor</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@profile-component</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * A basic Vue test example. */ public function test_vue(): void { $this->browse(function (Browser $browser) { $browser->visit('/') ->assertVue('user.name', 'Taylor', '@profile-component'); }); }</div></code></pre> </div> </div> </div> <h4 id="assert-vue-is-not"><a href="#assert-vue-is-not">assertVueIsNot</a></h4> <p>Assert that a given Vue component data property does not match the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertVueIsNot</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$property</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$componentSelector</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">null</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertVueIsNot($property, $value, $componentSelector = null);</div></code></pre> </div> <h4 id="assert-vue-contains"><a href="#assert-vue-contains">assertVueContains</a></h4> <p>Assert that a given Vue component data property is an array and contains the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertVueContains</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$property</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$componentSelector</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">null</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertVueContains($property, $value, $componentSelector = null);</div></code></pre> </div> <h4 id="assert-vue-doesnt-contain"><a href="#assert-vue-doesnt-contain">assertVueDoesntContain</a></h4> <p>Assert that a given Vue component data property is an array and does not contain the given value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertVueDoesntContain</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$property</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$componentSelector</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">null</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->assertVueDoesntContain($property, $value, $componentSelector = null);</div></code></pre> </div> <h2 id="pages"><a href="#pages">Pages</a></h2> <p>Sometimes, tests require several complicated actions to be performed in sequence. This can make your tests harder to read and understand. Dusk Pages allow you to define expressive actions that may then be performed on a given page via a single method. Pages also allow you to define short-cuts to common selectors for your application or for a single page.</p> <h3 id="generating-pages"><a href="#generating-pages">Generating Pages</a></h3> <p>To generate a page object, execute the <code>dusk:page</code> Artisan command. All page objects will be placed in your application's <code>tests/Browser/Pages</code> directory:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:page</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">Login</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan dusk:page Login</div></code></pre> </div> <h3 id="configuring-pages"><a href="#configuring-pages">Configuring Pages</a></h3> <p>By default, pages have three methods: <code>url</code>, <code>assert</code>, and <code>elements</code>. We will discuss the <code>url</code> and <code>assert</code> methods now. The <code>elements</code> method will be <a href="#shorthand-selectors">discussed in more detail below</a>.</p> <h4 id="the-url-method"><a href="#the-url-method">The <code>url</code> Method</a></h4> <p>The <code>url</code> method should return the path of the URL that represents the page. Dusk will use this URL when navigating to the page in the browser:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Get the URL for the page.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">url</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Get the URL for the page. */ public function url(): string { return '/login'; }</div></code></pre> </div> <h4 id="the-assert-method"><a href="#the-assert-method">The <code>assert</code> Method</a></h4> <p>The <code>assert</code> method may make any assertions necessary to verify that the browser is actually on the given page. It is not actually necessary to place anything within this method; however, you are free to make these assertions if you wish. These assertions will be run automatically when navigating to the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Assert that the browser is on the page.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">assert</span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertPathIs</span><span style="color: #BFC7D5;">(</span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">url</span><span style="color: #BFC7D5;">());</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Assert that the browser is on the page. */ public function assert(Browser $browser): void { $browser->assertPathIs($this->url()); }</div></code></pre> </div> <h3 id="navigating-to-pages"><a href="#navigating-to-pages">Navigating to Pages</a></h3> <p>Once a page has been defined, you may navigate to it using the <code>visit</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\Browser\Pages\</span><span style="color: #FFCB8B;">Login</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #89DDFF;">new</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Login</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Tests\Browser\Pages\Login; $browser->visit(new Login);</div></code></pre> </div> <p>Sometimes you may already be on a given page and need to "load" the page's selectors and methods into the current test context. This is common when pressing a button and being redirected to a given page without explicitly navigating to it. In this situation, you may use the <code>on</code> method to load the page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\Browser\Pages\</span><span style="color: #FFCB8B;">CreatePlaylist</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/dashboard</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">clickLink</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Create Playlist</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">on</span><span style="color: #BFC7D5;">(</span><span style="color: #89DDFF;">new</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">CreatePlaylist</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@create</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Tests\Browser\Pages\CreatePlaylist; $browser->visit('/dashboard') ->clickLink('Create Playlist') ->on(new CreatePlaylist) ->assertSee('@create');</div></code></pre> </div> <h3 id="shorthand-selectors"><a href="#shorthand-selectors">Shorthand Selectors</a></h3> <p>The <code>elements</code> method within page classes allows you to define quick, easy-to-remember shortcuts for any CSS selector on your page. For example, let's define a shortcut for the "email" input field of the application's login page:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #697098;"> * Get the element shortcuts for the page.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@return</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span><span style="color: #697098;"><</span><span style="color: #C792EA;">string</span><span style="color: #697098;">, string></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">elements</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">array</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">input[name=email]</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> ];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Get the element shortcuts for the page. * * @return array<string, string> */ public function elements(): array { return [ '@email' => 'input[name=email]', ]; }</div></code></pre> </div> <p>Once the shortcut has been defined, you may use the shorthand selector anywhere you would typically use a full CSS selector:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fde8f0e5e6fbc9e5e8fbe8ffece5a7eae6e4">[email protected]</a></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $browser->type('@email', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="add9ccd4c1c2dfedc1ccdfccdbc8c183cec2c0">[email protected]</a>');</div></code></pre> </div> <h4 id="global-shorthand-selectors"><a href="#global-shorthand-selectors">Global Shorthand Selectors</a></h4> <p>After installing Dusk, a base <code>Page</code> class will be placed in your <code>tests/Browser/Pages</code> directory. This class contains a <code>siteElements</code> method which may be used to define global shorthand selectors that should be available on every page throughout your application:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #697098;"> * Get the global element shortcuts for the site.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@return</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span><span style="color: #697098;"><</span><span style="color: #C792EA;">string</span><span style="color: #697098;">, string></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">static</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">siteElements</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">array</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@element</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#selector</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> ];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Get the global element shortcuts for the site. * * @return array<string, string> */ public static function siteElements(): array { return [ '@element' => '#selector', ]; }</div></code></pre> </div> <h3 id="page-methods"><a href="#page-methods">Page Methods</a></h3> <p>In addition to the default methods defined on pages, you may define additional methods which may be used throughout your tests. For example, let's imagine we are building a music management application. A common action for one page of the application might be to create a playlist. Instead of re-writing the logic to create a playlist in each test, you may define a <code>createPlaylist</code> method on a page class:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> Tests\Browser\Pages;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Page</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">Dashboard</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">Page</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Other page methods...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #697098;"> * Create a new playlist.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">createPlaylist</span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$name</span><span style="color: #D9F5DD;">)</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">type</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">check</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">share</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">press</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Create Playlist</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace Tests\Browser\Pages; use Laravel\Dusk\Browser; use Laravel\Dusk\Page; class Dashboard extends Page { // Other page methods... /** * Create a new playlist. */ public function createPlaylist(Browser $browser, string $name): void { $browser->type('name', $name) ->check('share') ->press('Create Playlist'); } }</div></code></pre> </div> <p>Once the method has been defined, you may use it within any test that utilizes the page. The browser instance will automatically be passed as the first argument to custom page methods:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\Browser\Pages\</span><span style="color: #FFCB8B;">Dashboard</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #89DDFF;">new</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Dashboard</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">createPlaylist</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">My Playlist</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">My Playlist</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Tests\Browser\Pages\Dashboard; $browser->visit(new Dashboard) ->createPlaylist('My Playlist') ->assertSee('My Playlist');</div></code></pre> </div> <h2 id="components"><a href="#components">Components</a></h2> <p>Components are similar to Dusk’s “page objects”, but are intended for pieces of UI and functionality that are re-used throughout your application, such as a navigation bar or notification window. As such, components are not bound to specific URLs.</p> <h3 id="generating-components"><a href="#generating-components">Generating Components</a></h3> <p>To generate a component, execute the <code>dusk:component</code> Artisan command. New components are placed in the <code>tests/Browser/Components</code> directory:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">dusk:component</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">DatePicker</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan dusk:component DatePicker</div></code></pre> </div> <p>As shown above, a "date picker" is an example of a component that might exist throughout your application on a variety of pages. It can become cumbersome to manually write the browser automation logic to select a date in dozens of tests throughout your test suite. Instead, we can define a Dusk component to represent the date picker, allowing us to encapsulate that logic within the component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> Tests\Browser\Components;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Component</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> BaseComponent;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">DatePicker</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">BaseComponent</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #697098;"> * Get the root selector for the component.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">selector</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">.date-picker</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #697098;"> * Assert that the browser page contains the component.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">assert</span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertVisible</span><span style="color: #BFC7D5;">(</span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">selector</span><span style="color: #BFC7D5;">());</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span><span style="color: #697098;"> * Get the element shortcuts for the component.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">28</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">29</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@return</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span><span style="color: #697098;"><</span><span style="color: #C792EA;">string</span><span style="color: #697098;">, string></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">30</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">31</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">elements</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">array</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">32</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">33</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">34</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@date-field</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">input.datepicker-input</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">35</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@year-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">div > div.datepicker-years</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">36</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@month-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">div > div.datepicker-months</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">37</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@day-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">div > div.datepicker-days</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">38</span><span style="color: #BFC7D5;"> ];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">39</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">40</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">41</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">42</span><span style="color: #697098;"> * Select the given date.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">43</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">44</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">selectDate</span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">int</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$year</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">int</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$month</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">int</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$day</span><span style="color: #D9F5DD;">)</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">45</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">46</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@date-field</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">47</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">within</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@year-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$year</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">48</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$year</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">49</span><span style="color: #BFC7D5;"> })</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">50</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">within</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@month-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$month</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">51</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$month</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">52</span><span style="color: #BFC7D5;"> })</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">53</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">within</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">@day-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$day</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">54</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">click</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$day</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">55</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">56</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">57</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace Tests\Browser\Components; use Laravel\Dusk\Browser; use Laravel\Dusk\Component as BaseComponent; class DatePicker extends BaseComponent { /** * Get the root selector for the component. */ public function selector(): string { return '.date-picker'; } /** * Assert that the browser page contains the component. */ public function assert(Browser $browser): void { $browser->assertVisible($this->selector()); } /** * Get the element shortcuts for the component. * * @return array<string, string> */ public function elements(): array { return [ '@date-field' => 'input.datepicker-input', '@year-list' => 'div > div.datepicker-years', '@month-list' => 'div > div.datepicker-months', '@day-list' => 'div > div.datepicker-days', ]; } /** * Select the given date. */ public function selectDate(Browser $browser, int $year, int $month, int $day): void { $browser->click('@date-field') ->within('@year-list', function (Browser $browser) use ($year) { $browser->click($year); }) ->within('@month-list', function (Browser $browser) use ($month) { $browser->click($month); }) ->within('@day-list', function (Browser $browser) use ($day) { $browser->click($day); }); } }</div></code></pre> </div> <h3 id="using-components"><a href="#using-components">Using Components</a></h3> <p>Once the component has been defined, we can easily select a date within the date picker from any test. And, if the logic necessary to select a date changes, we only need to update the component:</p> <div class="tabbed-code" data-group="1df3cf502597c6d6b58a6e0bfc806498"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Pest" onClick="setTab('Pest', '1df3cf502597c6d6b58a6e0bfc806498')">Pest</button> <button class="tabbed-code-nav-button" data-tab="PHPUnit" onClick="setTab('PHPUnit', '1df3cf502597c6d6b58a6e0bfc806498')">PHPUnit</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Pest"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\Browser\Components\</span><span style="color: #FFCB8B;">DatePicker</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #82AAFF;">uses</span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #82AAFF;">test</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">basic example</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #FF5572;">this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #D9F5DD;">)</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">within</span><span style="color: #BFC7D5;">(</span><span style="color: #89DDFF;">new</span><span style="color: #82AAFF;"> </span><span style="color: #FFCB8B;">DatePicker</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">function</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #D9F5DD;">)</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">selectDate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">2019</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #F78C6C;">30</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">})</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">January</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">});</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php use Illuminate\Foundation\Testing\DatabaseMigrations; use Laravel\Dusk\Browser; use Tests\Browser\Components\DatePicker; uses(DatabaseMigrations::class); test('basic example', function () { $this->browse(function (Browser $browser) { $browser->visit('/') ->within(new DatePicker, function (Browser $browser) { $browser->selectDate(2019, 1, 30); }) ->assertSee('January'); }); });</div></code></pre> </div> <div class="code-container" data-tab="PHPUnit"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> Tests\Browser;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Foundation\Testing\</span><span style="color: #FFCB8B;">DatabaseMigrations</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Dusk\</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\Browser\Components\</span><span style="color: #FFCB8B;">DatePicker</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Tests\</span><span style="color: #FFCB8B;">DuskTestCase</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">ExampleTest</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">DuskTestCase</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #697098;"> * A basic component test example.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">test_basic_example</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">browse</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">visit</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">within</span><span style="color: #BFC7D5;">(</span><span style="color: #89DDFF;">new</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">DatePicker</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Browser</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$browser</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">selectDate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">2019</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">30</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> })</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">assertSee</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">January</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace Tests\Browser; use Illuminate\Foundation\Testing\DatabaseMigrations; use Laravel\Dusk\Browser; use Tests\Browser\Components\DatePicker; use Tests\DuskTestCase; class ExampleTest extends DuskTestCase { /** * A basic component test example. */ public function test_basic_example(): void { $this->browse(function (Browser $browser) { $browser->visit('/') ->within(new DatePicker, function (Browser $browser) { $browser->selectDate(2019, 1, 30); }) ->assertSee('January'); }); } }</div></code></pre> </div> </div> </div> <h2 id="continuous-integration"><a href="#continuous-integration">Continuous Integration</a></h2> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> Most Dusk continuous integration configurations expect your Laravel application to be served using the built-in PHP development server on port 8000. Therefore, before continuing, you should ensure that your continuous integration environment has an <code>APP_URL</code> environment variable value of <code>http://127.0.0.1:8000</code>.</p> </div> <h3 id="running-tests-on-heroku-ci"><a href="#running-tests-on-heroku-ci">Heroku CI</a></h3> <p>To run Dusk tests on <a href="https://www.heroku.com/continuous-integration">Heroku CI</a>, add the following Google Chrome buildpack and scripts to your Heroku <code>app.json</code> file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="json" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #C3E88D;">"environments"</span><span style="color: #BFC7D5;">: {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> </span><span style="color: #C3E88D;">"test"</span><span style="color: #BFC7D5;">: {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #C3E88D;">"buildpacks"</span><span style="color: #BFC7D5;">: [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> { </span><span style="color: #C3E88D;">"url"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #80CBC4;">heroku/php</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;"> },</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> { </span><span style="color: #C3E88D;">"url"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #80CBC4;">https://github.com/heroku/heroku-buildpack-chrome-for-testing</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C3E88D;">"scripts"</span><span style="color: #BFC7D5;">: {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #C3E88D;">"test-setup"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #80CBC4;">cp .env.testing .env</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #C3E88D;">"test"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #80CBC4;">nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux --port=9515 > /dev/null 2>&1 &' && nohup bash -c 'php artisan serve --no-reload > /dev/null 2>&1 &' && php artisan dusk</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> { "environments": { "test": { "buildpacks": [ { "url": "heroku/php" }, { "url": "https://github.com/heroku/heroku-buildpack-chrome-for-testing" } ], "scripts": { "test-setup": "cp .env.testing .env", "test": "nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux --port=9515 > /dev/null 2>&1 &' && nohup bash -c 'php artisan serve --no-reload > /dev/null 2>&1 &' && php artisan dusk" } } } }</div></code></pre> </div> <h3 id="running-tests-on-travis-ci"><a href="#running-tests-on-travis-ci">Travis CI</a></h3> <p>To run your Dusk tests on <a href="https://travis-ci.org">Travis CI</a>, use the following <code>.travis.yml</code> configuration. Since Travis CI is not a graphical environment, we will need to take some extra steps in order to launch a Chrome browser. In addition, we will use <code>php artisan serve</code> to launch PHP's built-in web server:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="yaml" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #89DDFF;">language</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #89DDFF;">php</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> - </span><span style="color: #F78C6C;">8.2</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #89DDFF;">addons</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">chrome</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">stable</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #89DDFF;">install</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">cp .env.testing .env</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">travis_retry composer install --no-interaction --prefer-dist</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">php artisan key:generate</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">php artisan dusk:chrome-driver</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #89DDFF;">before_script</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">php artisan serve --no-reload &</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #89DDFF;">script</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">php artisan dusk</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> language: php php: - 8.2 addons: chrome: stable install: - cp .env.testing .env - travis_retry composer install --no-interaction --prefer-dist - php artisan key:generate - php artisan dusk:chrome-driver before_script: - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost & - php artisan serve --no-reload & script: - php artisan dusk</div></code></pre> </div> <h3 id="running-tests-on-github-actions"><a href="#running-tests-on-github-actions">GitHub Actions</a></h3> <p>If you are using <a href="https://github.com/features/actions">GitHub Actions</a> to run your Dusk tests, you may use the following configuration file as a starting point. Like TravisCI, we will use the <code>php artisan serve</code> command to launch PHP's built-in web server:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="yaml" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">CI</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #FF5874;">on</span><span style="color: #BFC7D5;">: [</span><span style="color: #BFC7D5;">push</span><span style="color: #BFC7D5;">]</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #89DDFF;">jobs</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">dusk-php</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">runs-on</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">ubuntu-latest</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">env</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">APP_URL</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">http://127.0.0.1:8000</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">DB_USERNAME</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">root</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">DB_PASSWORD</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">root</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">MAIL_MAILER</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">log</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">steps</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">uses</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">actions/checkout@v4</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Prepare The Environment</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">cp .env.example .env</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Create Database</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #C792EA;">|</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> sudo systemctl start mysql</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> mysql --user="root" --password="root" -e "CREATE DATABASE \`my-database\` character set UTF8mb4 collate utf8mb4_bin;"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Install Composer Dependencies</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">composer install --no-progress --prefer-dist --optimize-autoloader</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Generate Application Key</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">php artisan key:generate</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Upgrade Chrome Driver</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">php artisan dusk:chrome-driver --detect</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Start Chrome Driver</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 &</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">28</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Run Laravel Server</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">29</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">php artisan serve --no-reload &</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">30</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Run Dusk Tests</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">31</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">run</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">php artisan dusk</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">32</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Upload Screenshots</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">33</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">if</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">failure()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">34</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">uses</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">actions/upload-artifact@v4</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">35</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">with</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">36</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">screenshots</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">37</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">path</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">tests/Browser/screenshots</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">38</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Upload Console Logs</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">39</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">if</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">failure()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">40</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">uses</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">actions/upload-artifact@v4</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">41</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">with</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">42</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">console</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">43</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">path</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">tests/Browser/console</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> name: CI on: [push] jobs: dusk-php: runs-on: ubuntu-latest env: APP_URL: "http://127.0.0.1:8000" DB_USERNAME: root DB_PASSWORD: root MAIL_MAILER: log steps: - uses: actions/checkout@v4 - name: Prepare The Environment run: cp .env.example .env - name: Create Database run: | sudo systemctl start mysql mysql --user="root" --password="root" -e "CREATE DATABASE \`my-database\` character set UTF8mb4 collate utf8mb4_bin;" - name: Install Composer Dependencies run: composer install --no-progress --prefer-dist --optimize-autoloader - name: Generate Application Key run: php artisan key:generate - name: Upgrade Chrome Driver run: php artisan dusk:chrome-driver --detect - name: Start Chrome Driver run: ./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 & - name: Run Laravel Server run: php artisan serve --no-reload & - name: Run Dusk Tests run: php artisan dusk - name: Upload Screenshots if: failure() uses: actions/upload-artifact@v4 with: name: screenshots path: tests/Browser/screenshots - name: Upload Console Logs if: failure() uses: actions/upload-artifact@v4 with: name: console path: tests/Browser/console</div></code></pre> </div> <h3 id="running-tests-on-chipper-ci"><a href="#running-tests-on-chipper-ci">Chipper CI</a></h3> <p>If you are using <a href="https://chipperci.com">Chipper CI</a> to run your Dusk tests, you may use the following configuration file as a starting point. We will use PHP's built-in server to run Laravel so we can listen for requests:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="yaml" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">#</span><span style="color: #697098;"> file .chipperci.yml</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #89DDFF;">version</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">1</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #89DDFF;">environment</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">php</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">8.2</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">node</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">16</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #697098;">#</span><span style="color: #697098;"> Include Chrome in the build environment</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #89DDFF;">services</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> - </span><span style="color: #BFC7D5;">dusk</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;">#</span><span style="color: #697098;"> Build all commits</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #FF5874;">on</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">push</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">branches</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">.*</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #89DDFF;">pipeline</span><span style="color: #BFC7D5;">:</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Setup</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">cmd</span><span style="color: #BFC7D5;">: </span><span style="color: #C792EA;">|</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> cp -v .env.example .env</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> composer install --no-interaction --prefer-dist --optimize-autoloader</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;"> php artisan key:generate</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> # Create a dusk env file, ensuring APP_URL uses BUILD_HOST</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;"> cp -v .env .env.dusk.ci</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span><span style="color: #BFC7D5;"> sed -i "s@APP_URL=.*@APP_URL=http://$BUILD_HOST:8000@g" .env.dusk.ci</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">28</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Compile Assets</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">29</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">cmd</span><span style="color: #BFC7D5;">: </span><span style="color: #C792EA;">|</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">30</span><span style="color: #BFC7D5;"> npm ci --no-audit</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">31</span><span style="color: #BFC7D5;"> npm run build</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">32</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">33</span><span style="color: #BFC7D5;"> - </span><span style="color: #89DDFF;">name</span><span style="color: #BFC7D5;">: </span><span style="color: #BFC7D5;">Browser Tests</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">34</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">cmd</span><span style="color: #BFC7D5;">: </span><span style="color: #C792EA;">|</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">35</span><span style="color: #BFC7D5;"> php -S [::0]:8000 -t public 2>server.log &</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">36</span><span style="color: #BFC7D5;"> sleep 2</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">37</span><span style="color: #BFC7D5;"> php artisan dusk:chrome-driver $CHROME_DRIVER</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">38</span><span style="color: #BFC7D5;"> php artisan dusk --env=ci</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> # file .chipperci.yml version: 1 environment: php: 8.2 node: 16 # Include Chrome in the build environment services: - dusk # Build all commits on: push: branches: .* pipeline: - name: Setup cmd: | cp -v .env.example .env composer install --no-interaction --prefer-dist --optimize-autoloader php artisan key:generate # Create a dusk env file, ensuring APP_URL uses BUILD_HOST cp -v .env .env.dusk.ci sed -i "s@APP_URL=.*@APP_URL=http://$BUILD_HOST:8000@g" .env.dusk.ci - name: Compile Assets cmd: | npm ci --no-audit npm run build - name: Browser Tests cmd: | php -S [::0]:8000 -t public 2>server.log & sleep 2 php artisan dusk:chrome-driver $CHROME_DRIVER php artisan dusk --env=ci</div></code></pre> </div> <p>To learn more about running Dusk tests on Chipper CI, including how to use databases, consult the <a href="https://chipperci.com/docs/testing/laravel-dusk-new/">official Chipper CI documentation</a>.</p><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script> function setTab(tab, group, save) { save = typeof save === 'undefined' ? true : save document .querySelectorAll(`.tabbed-code[data-group="${group}"] .tabbed-code-nav-button`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] .code-container`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] [data-tab="${tab}"]`) .forEach(el => el.classList.add('active')) if (save) { saveTab(tab, group) } } function getTabs() { try { return JSON.parse(localStorage.tabs) } catch { return {} } } function saveTab(tab, group) { localStorage.tabs = JSON.stringify({ ...getTabs(), [group]: tab, }) } function restoreTabs() { Object.entries(getTabs()).forEach(([group, tab]) => setTab(tab, group, false)) } restoreTabs() </script> </div> </section> </section> </div> </section> </div> </div> </div> </div> <div class="text-sand-dark-10"> <div class="max-w-full w-full xl:max-w-[1400px] pt-10 md:pt-24 px-4 xl:px-16 mx-auto border-l border-sand-light-7"> <div class="grid grid-cols-12 lg:gap-12"> <div class="col-span-12 lg:col-span-3 lg:mt-14"> <p class="text-pretty">Laravel is the most productive way to<br class="block lg:hidden"> build, deploy, and monitor software.</p> <ul class="flex items-center justify-start my-8 space-x-6 lg:my-16"> <li> <a href="https://github.com/laravel" target="_blank" title="Laravel on GitHub" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M0 12.305C0 17.74 3.438 22.352 8.207 23.979C8.807 24.092 9.027 23.712 9.027 23.386C9.027 23.094 9.016 22.32 9.01 21.293C5.671 22.037 4.967 19.643 4.967 19.643C4.422 18.223 3.635 17.845 3.635 17.845C2.545 17.081 3.718 17.096 3.718 17.096C4.921 17.183 5.555 18.364 5.555 18.364C6.626 20.244 8.364 19.702 9.048 19.386C9.157 18.591 9.468 18.049 9.81 17.741C7.145 17.431 4.344 16.376 4.344 11.661C4.344 10.318 4.811 9.219 5.579 8.359C5.456 8.048 5.044 6.797 5.696 5.103C5.696 5.103 6.704 4.773 8.996 6.364C9.954 6.091 10.98 5.955 12.001 5.95C13.02 5.955 14.047 6.091 15.005 6.364C17.295 4.772 18.302 5.103 18.302 5.103C18.956 6.797 18.544 8.048 18.421 8.359C19.191 9.219 19.655 10.318 19.655 11.661C19.655 16.387 16.849 17.428 14.175 17.732C14.606 18.112 14.99 18.862 14.99 20.011C14.99 21.656 14.975 22.982 14.975 23.386C14.975 23.715 15.191 24.098 15.8 23.977C20.565 22.347 24 17.738 24 12.305C24 5.508 18.627 0 12 0C5.373 0 0 5.508 0 12.305Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://x.com/laravelphp" target="_blank" title="Laravel on X" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M13.969 10.1571L22.7069 0H20.6363L13.0491 8.81931L6.9893 0H0L9.16366 13.3364L0 23.9877H2.07073L10.083 14.6742L16.4826 23.9877H23.4719L13.9684 10.1571H13.969ZM11.1328 13.4538L10.2043 12.1258L2.81684 1.55881H5.99736L11.9592 10.0867L12.8876 11.4147L20.6373 22.4998H17.4567L11.1328 13.4544V13.4538Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://www.youtube.com/@LaravelPHP" target="_blank" title="Laravel on YouTube" class="transition duration-100 hover:text-sand-dark-6"> <svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M33.892 3.75519C33.4994 2.27706 32.3428 1.11294 30.8742 0.717875C28.2124 0 17.5385 0 17.5385 0C17.5385 0 6.8648 0 4.20286 0.717875C2.7343 1.113 1.57768 2.27706 1.18511 3.75519C0.471863 6.43437 0.471863 12.0243 0.471863 12.0243C0.471863 12.0243 0.471863 17.6141 1.18511 20.2933C1.57768 21.7714 2.7343 22.8871 4.20286 23.2821C6.8648 24 17.5385 24 17.5385 24C17.5385 24 28.2123 24 30.8742 23.2821C32.3428 22.8871 33.4994 21.7714 33.892 20.2933C34.6052 17.6141 34.6052 12.0243 34.6052 12.0243C34.6052 12.0243 34.6052 6.43437 33.892 3.75519ZM14.0476 17.0994V6.94906L22.9688 12.0244L14.0476 17.0994Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://discord.com/invite/laravel" target="_blank" title="Laravel on Discord" class="transition duration-100 hover:text-sand-dark-6"> <svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M27.4296 2.00996C25.3491 1.05745 23.1528 0.381713 20.8966 0C20.5879 0.551901 20.3086 1.11973 20.0598 1.70112C17.6566 1.33898 15.2127 1.33898 12.8095 1.70112C12.5605 1.11979 12.2812 0.551968 11.9726 0C9.71504 0.384937 7.51722 1.06228 5.43462 2.01494C1.30013 8.132 0.179328 14.0971 0.739727 19.9776C3.16099 21.7665 5.87108 23.127 8.75218 24C9.40092 23.1275 9.97497 22.2018 10.4682 21.2329C9.53134 20.883 8.62706 20.4512 7.76588 19.9427C7.99253 19.7783 8.2142 19.609 8.42839 19.4446C10.9342 20.623 13.6692 21.234 16.4384 21.234C19.2075 21.234 21.9425 20.623 24.4483 19.4446C24.665 19.6214 24.8867 19.7908 25.1108 19.9427C24.248 20.4521 23.3421 20.8846 22.4035 21.2354C22.8962 22.2039 23.4702 23.1287 24.1196 24C27.0031 23.1305 29.7153 21.7707 32.137 19.9801C32.7945 13.1606 31.0137 7.25031 27.4296 2.00996ZM11.1781 16.3611C9.61644 16.3611 8.32628 14.944 8.32628 13.2005C8.32628 11.457 9.57161 10.0274 11.1731 10.0274C12.7746 10.0274 14.0548 11.457 14.0274 13.2005C14 14.944 12.7696 16.3611 11.1781 16.3611ZM21.6986 16.3611C20.1345 16.3611 18.8493 14.944 18.8493 13.2005C18.8493 11.457 20.0946 10.0274 21.6986 10.0274C23.3026 10.0274 24.5729 11.457 24.5455 13.2005C24.5181 14.944 23.2902 16.3611 21.6986 16.3611Z" fill="currentColor" /> </svg> </a> </li> </ul> <div> <ul class="flex justify-start space-x-8"> <li>© 2025 Laravel</li> <li><a href="https://laravel.com/trademark" class="transition duration-100 hover:text-sand-dark-6">Legal</a></li> <li><a href="https://status.laravel.com/" class="transition duration-100 hover:text-sand-dark-6">Status</a></li> </ul> </div> </div> <div class="grid grid-cols-subgrid col-span-12 lg:col-span-9"> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-2 col-span-6 order-2"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-2 col-span-6"> Products </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="https://cloud.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Cloud</a> </li> <li> <a href="https://forge.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Forge</a> </li> <li> <a href="https://vapor.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Vapor</a> </li> <li> <a href="https://nightwatch.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Nightwatch</a> </li> <li> <a href="https://nova.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Nova</a> </li> </ul> </div> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-4 col-span-12 order-3"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-4 col-span-12"> Packages </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs/cashier" class="transition duration-100 hover:text-sand-dark-6">Cashier</a> </li> <li> <a href="/docs/dusk" class="transition duration-100 hover:text-sand-dark-6">Dusk</a> </li> <li> <a href="/docs/horizon" class="transition duration-100 hover:text-sand-dark-6">Horizon</a> </li> <li> <a href="/docs/octane" class="transition duration-100 hover:text-sand-dark-6">Octane</a> </li> <li> <a href="/docs/scout" class="transition duration-100 hover:text-sand-dark-6">Scout</a> </li> <li> <a href="/docs/pennant" class="transition duration-100 hover:text-sand-dark-6">Pennant</a> </li> <li> <a href="/docs/pint" class="transition duration-100 hover:text-sand-dark-6">Pint</a> </li> </ul> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs/sail" class="transition duration-100 hover:text-sand-dark-6">Sail</a> </li> <li> <a href="/docs/sanctum" class="transition duration-100 hover:text-sand-dark-6">Sanctum</a> </li> <li> <a href="/docs/socialite" class="transition duration-100 hover:text-sand-dark-6">Socialite</a> </li> <li> <a href="/docs/telescope" class="transition duration-100 hover:text-sand-dark-6">Telescope</a> </li> <li> <a href="/docs/pulse" class="transition duration-100 hover:text-sand-dark-6">Pulse</a> </li> <li> <a href="/docs/reverb" class="transition duration-100 hover:text-sand-dark-6">Reverb</a> </li> <li> <a href="/docs/broadcasting" class="transition duration-100 hover:text-sand-dark-6">Echo</a> </li> </ul> </div> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-2 col-span-6 order-1"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-2 col-span-6"> Resources </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs" class="transition duration-100 hover:text-sand-dark-6">Documentation</a> </li> <li> <a href="/starter-kits" class="transition duration-100 hover:text-sand-dark-6">Starter Kits</a> </li> <li> <a href="/docs/releases" class="transition duration-100 hover:text-sand-dark-6">Release Notes</a> </li> <li> <a href="https://blog.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Blog</a> </li> <li> <a href="https://partners.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Partners</a> </li> <li> <a href="https://laravel-news.com" class="transition duration-100 hover:text-sand-dark-6">News</a> </li> <li> <a href="https://larabelles.com/" class="transition duration-100 hover:text-sand-dark-6">Larabelles</a> </li> <li> <a href="https://larajobs.com/?partner=5" class="transition duration-100 hover:text-sand-dark-6">Jobs</a> </li> <li> <a href="/careers" class="transition duration-100 hover:text-sand-dark-6">Careers</a> </li> </ul> </div> </div> <div class="col-span-12 text-sand-light-1"> <svg class="w-full h-full text-laravel-red" width="1280" height="308" viewBox="0 0 1280 308" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M50.2753 0H0V308.689H144.713V263.27H50.2753V0Z" fill="currentColor" /> <path d="M322.209 130.973C315.796 120.684 306.688 112.602 294.883 106.718C283.081 100.84 271.201 97.8969 259.253 97.8969C243.798 97.8969 229.665 100.764 216.843 106.496C204.014 112.228 193.015 120.099 183.834 130.091C174.654 140.088 167.51 151.628 162.412 164.706C157.308 177.792 154.761 191.54 154.761 205.94C154.761 220.645 157.308 234.457 162.412 247.39C167.508 260.332 174.652 271.796 183.834 281.788C193.015 291.785 204.017 299.647 216.843 305.379C229.665 311.111 243.798 313.978 259.253 313.978C271.201 313.978 283.081 311.038 294.883 305.159C306.688 299.282 315.796 291.197 322.209 280.904V308.685H369.865V103.186H322.209V130.973ZM317.837 231.076C314.922 239.016 310.841 245.925 305.598 251.804C300.35 257.687 294.009 262.389 286.579 265.917C279.146 269.445 270.905 271.208 261.875 271.208C252.837 271.208 244.676 269.445 237.391 265.917C230.104 262.389 223.839 257.687 218.593 251.804C213.345 245.925 209.335 239.016 206.57 231.076C203.794 223.138 202.417 214.759 202.417 205.942C202.417 197.12 203.794 188.742 206.57 180.804C209.335 172.866 213.345 165.961 218.593 160.078C223.839 154.201 230.102 149.493 237.391 145.965C244.676 142.437 252.837 140.674 261.875 140.674C270.908 140.674 279.146 142.437 286.579 145.965C294.009 149.493 300.35 154.199 305.598 160.078C310.844 165.961 314.922 172.866 317.837 180.804C320.748 188.742 322.209 197.12 322.209 205.942C322.209 214.759 320.748 223.138 317.837 231.076Z" fill="currentColor" /> <path d="M709.568 130.973C703.155 120.684 694.047 112.602 682.242 106.718C670.44 100.84 658.56 97.8969 646.612 97.8969C631.157 97.8969 617.024 100.764 604.202 106.496C591.373 112.228 580.374 120.099 571.193 130.091C562.013 140.088 554.869 151.628 549.771 164.706C544.666 177.792 542.12 191.54 542.12 205.94C542.12 220.645 544.666 234.457 549.771 247.39C554.867 260.332 562.01 271.796 571.193 281.788C580.374 291.785 591.375 299.647 604.202 305.379C617.024 311.111 631.157 313.978 646.612 313.978C658.56 313.978 670.44 311.038 682.242 305.159C694.047 299.282 703.155 291.197 709.568 280.904V308.685H757.224V103.186H709.568V130.973ZM705.198 231.076C702.283 239.016 698.202 245.925 692.959 251.804C687.711 257.687 681.37 262.389 673.94 265.917C666.507 269.445 658.266 271.208 649.236 271.208C640.198 271.208 632.037 269.445 624.752 265.917C617.465 262.389 611.2 257.687 605.954 251.804C600.706 245.925 596.696 239.016 593.931 231.076C591.155 223.138 589.778 214.759 589.778 205.942C589.778 197.12 591.155 188.742 593.931 180.804C596.696 172.866 600.706 165.961 605.954 160.078C611.2 154.201 617.463 149.493 624.752 145.965C632.037 142.437 640.198 140.674 649.236 140.674C658.269 140.674 666.507 142.437 673.94 145.965C681.37 149.493 687.711 154.199 692.959 160.078C698.205 165.961 702.283 172.866 705.198 180.804C708.109 188.742 709.57 197.12 709.57 205.942C709.568 214.759 708.107 223.138 705.198 231.076Z" fill="currentColor" /> <path d="M1280 1.12315e-05H1232.35V308.689H1280V1.12315e-05Z" fill="currentColor" /> <path d="M407.466 308.689H455.117V150.486H536.876V103.192H407.466V308.689Z" fill="currentColor" /> <path d="M948.281 103.192L888.386 260.557L828.489 103.192H780.224L858.441 308.689H918.331L996.546 103.192H948.281Z" fill="currentColor" /> <path d="M1100.48 97.908C1042.13 97.908 995.937 146.279 995.937 205.944C995.937 271.9 1040.64 313.98 1106.59 313.98C1143.5 313.98 1167.06 299.745 1195.85 268.746L1163.66 243.621C1163.64 243.646 1139.36 275.802 1103.1 275.802C1060.96 275.802 1043.22 241.533 1043.22 223.803H1201.32C1209.62 155.913 1165.37 97.908 1100.48 97.908ZM1043.35 188.085C1043.71 184.13 1049.2 136.086 1100.1 136.086C1151.01 136.086 1157.19 184.123 1157.55 188.085H1043.35Z" fill="currentColor" /> </svg> </div> </div> </div> </div> <script> var _gaq=[['_setAccount','UA-23865777-1'],['_trackPageview']]; (function(d,t){ var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s) }(document,'script')); </script>  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/45240648.js"></script> </body> </html>