[{"data":1,"prerenderedAt":549},["ShallowReactive",2],{"navigation_docs":3,"-engineering-contributing-front-end-testing":369,"-engineering-contributing-front-end-testing-surround":544},[4,8,72,102,220,266,280,301,365],{"title":5,"path":6,"stem":7},"Introduction","\u002Fintroduction","0.introduction",{"title":9,"icon":10,"path":11,"stem":12,"children":13,"page":67},"Company","i-lucide-building-2","\u002Fcompany","1.company",[14,18,22,26,30,34,38,42,46,50,54,68],{"title":15,"path":16,"stem":17},"About","\u002Fcompany\u002Fabout","1.company\u002F0.about",{"title":19,"path":20,"stem":21},"Values","\u002Fcompany\u002Fvalues","1.company\u002F1.values",{"title":23,"path":24,"stem":25},"Communication","\u002Fcompany\u002Fcommunication","1.company\u002Fcommunication",{"title":27,"path":28,"stem":29},"Competition","\u002Fcompany\u002Fcompetition","1.company\u002Fcompetition",{"title":31,"path":32,"stem":33},"Hybrid Working","\u002Fcompany\u002Fhybrid-working","1.company\u002Fhybrid-working",{"title":35,"path":36,"stem":37},"Manchester Office","\u002Fcompany\u002Foffice","1.company\u002Foffice",{"title":39,"path":40,"stem":41},"Operations","\u002Fcompany\u002Foperations","1.company\u002Foperations",{"title":43,"path":44,"stem":45},"Policies","\u002Fcompany\u002Fpolicies","1.company\u002Fpolicies",{"title":47,"path":48,"stem":49},"Problem Statement","\u002Fcompany\u002Fproblem-statement","1.company\u002Fproblem-statement",{"title":51,"path":52,"stem":53},"Product Strategy","\u002Fcompany\u002Fproduct-strategy","1.company\u002Fproduct-strategy",{"title":55,"path":56,"stem":57,"children":58,"page":67},"Products","\u002Fcompany\u002Fproducts","1.company\u002Fproducts",[59,63],{"title":60,"path":61,"stem":62},"Capability Exchange","\u002Fcompany\u002Fproducts\u002Fcapability-exchange","1.company\u002Fproducts\u002Fcapability-exchange",{"title":64,"path":65,"stem":66},"ESProfiler Platform","\u002Fcompany\u002Fproducts\u002Fesprofiler","1.company\u002Fproducts\u002Fesprofiler",false,{"title":69,"path":70,"stem":71},"Security","\u002Fcompany\u002Fsecurity","1.company\u002Fsecurity",{"title":73,"icon":74,"path":75,"stem":76,"children":77,"page":67},"People Ops","i-lucide-users","\u002Fpeople-ops","2.people-ops",[78,82,86,90,94,98],{"title":79,"path":80,"stem":81},"Compensation","\u002Fpeople-ops\u002Fcompensation","2.people-ops\u002Fcompensation",{"title":83,"path":84,"stem":85},"Education","\u002Fpeople-ops\u002Feducation","2.people-ops\u002Feducation",{"title":87,"path":88,"stem":89},"Expenses","\u002Fpeople-ops\u002Fexpenses","2.people-ops\u002Fexpenses",{"title":91,"path":92,"stem":93},"Holiday & Leave","\u002Fpeople-ops\u002Fleave","2.people-ops\u002Fleave",{"title":95,"path":96,"stem":97},"Onboarding","\u002Fpeople-ops\u002Fonboarding","2.people-ops\u002Fonboarding",{"title":99,"path":100,"stem":101},"Recruitment","\u002Fpeople-ops\u002Frecruitment","2.people-ops\u002Frecruitment",{"title":103,"icon":104,"path":105,"stem":106,"children":107,"page":67},"Engineering","i-lucide-rocket","\u002Fengineering","3.engineering",[108,151,155,175,196,200,208,212,216],{"title":109,"path":110,"stem":111,"children":112,"page":67},"Contributing","\u002Fengineering\u002Fcontributing","3.engineering\u002Fcontributing",[113,117,121,125,129,142],{"title":114,"path":115,"stem":116},"Development Setup","\u002Fengineering\u002Fcontributing\u002Fdevelopment-setup","3.engineering\u002Fcontributing\u002F1.development-setup",{"title":118,"path":119,"stem":120},"Engineering Operations","\u002Fengineering\u002Fcontributing\u002Fengineering-operations","3.engineering\u002Fcontributing\u002F2.engineering-operations",{"title":122,"path":123,"stem":124},"Documentation","\u002Fengineering\u002Fcontributing\u002Fdocumentation","3.engineering\u002Fcontributing\u002F3.documentation",{"title":126,"path":127,"stem":128},"Agentic Coding","\u002Fengineering\u002Fcontributing\u002Fagentic-coding","3.engineering\u002Fcontributing\u002Fagentic-coding",{"title":130,"path":131,"stem":132,"children":133,"page":67},"Back End","\u002Fengineering\u002Fcontributing\u002Fback-end","3.engineering\u002Fcontributing\u002Fback-end",[134,138],{"title":135,"path":136,"stem":137},"API Guidelines","\u002Fengineering\u002Fcontributing\u002Fback-end\u002Fapi-guidelines","3.engineering\u002Fcontributing\u002Fback-end\u002Fapi-guidelines",{"title":139,"path":140,"stem":141},"LLM Prompts & Langfuse Integration","\u002Fengineering\u002Fcontributing\u002Fback-end\u002Fllm-prompts","3.engineering\u002Fcontributing\u002Fback-end\u002Fllm-prompts",{"title":143,"path":144,"stem":145,"children":146,"page":67},"Front End","\u002Fengineering\u002Fcontributing\u002Ffront-end","3.engineering\u002Fcontributing\u002Ffront-end",[147],{"title":148,"path":149,"stem":150},"Testing","\u002Fengineering\u002Fcontributing\u002Ffront-end\u002Ftesting","3.engineering\u002Fcontributing\u002Ffront-end\u002Ftesting",{"title":152,"path":153,"stem":154},"Production Database","\u002Fengineering\u002Fdatabase-connection","3.engineering\u002Fdatabase-connection",{"title":156,"path":157,"stem":158,"children":159},"Deployment","\u002Fengineering\u002Fdeployment","3.engineering\u002Fdeployment",[160,163,167,171],{"title":60,"path":161,"stem":162},"\u002Fengineering\u002Fdeployment\u002Fcapability-exchange","3.engineering\u002Fdeployment\u002Fcapability-exchange",{"title":164,"path":165,"stem":166},"Langfuse Deployment","\u002Fengineering\u002Fdeployment\u002Fecs-langfuse-deployment","3.engineering\u002Fdeployment\u002Fecs-langfuse-deployment",{"title":168,"path":169,"stem":170},"ESP Platform Configuration","\u002Fengineering\u002Fdeployment\u002Fesp-platform-configuration","3.engineering\u002Fdeployment\u002Fesp-platform-configuration",{"title":172,"path":173,"stem":174},"Platform","\u002Fengineering\u002Fdeployment\u002Fplatform","3.engineering\u002Fdeployment\u002Fplatform",{"title":176,"path":177,"stem":178,"children":179,"page":67},"Github","\u002Fengineering\u002Fgithub","3.engineering\u002Fgithub",[180,184,188,192],{"title":181,"path":182,"stem":183},"Packages","\u002Fengineering\u002Fgithub\u002Fpackages","3.engineering\u002Fgithub\u002Fpackages",{"title":185,"path":186,"stem":187},"Personal Access Token","\u002Fengineering\u002Fgithub\u002Fpersonal-access-token","3.engineering\u002Fgithub\u002Fpersonal-access-token",{"title":189,"path":190,"stem":191},"Troubleshooting","\u002Fengineering\u002Fgithub\u002Ftroubleshooting","3.engineering\u002Fgithub\u002Ftroubleshooting",{"title":193,"path":194,"stem":195},"Workflows","\u002Fengineering\u002Fgithub\u002Fworkflows","3.engineering\u002Fgithub\u002Fworkflows",{"title":197,"path":198,"stem":199},"Platform Ops","\u002Fengineering\u002Fplatform-ops","3.engineering\u002Fplatform-ops",{"title":172,"path":201,"stem":202,"children":203,"page":67},"\u002Fengineering\u002Fplatform","3.engineering\u002Fplatform",[204],{"title":205,"path":206,"stem":207},"useAPI","\u002Fengineering\u002Fplatform\u002Fuse-api","3.engineering\u002Fplatform\u002Fuse-api",{"title":209,"path":210,"stem":211},"Project Management","\u002Fengineering\u002Fproject-management","3.engineering\u002Fproject-management",{"title":213,"path":214,"stem":215},"Releases","\u002Fengineering\u002Frelease","3.engineering\u002Frelease",{"title":217,"path":218,"stem":219},"Tools","\u002Fengineering\u002Ftools","3.engineering\u002Ftools",{"title":221,"icon":222,"path":223,"stem":224,"children":225,"page":67},"Design","i-lucide-palette","\u002Fdesign","4.design",[226,247,251,255,259,262],{"title":227,"path":228,"stem":229,"children":230,"page":67},"Personas","\u002Fdesign\u002Fpersonas","4.design\u002F0.personas",[231,235,239,243],{"title":232,"path":233,"stem":234},"CISO - Simon","\u002Fdesign\u002Fpersonas\u002F01-ciso-simon","4.design\u002F0.personas\u002F01-ciso-simon",{"title":236,"path":237,"stem":238},"Head of Cyber - Harry","\u002Fdesign\u002Fpersonas\u002F02-head-of-cyber-harry","4.design\u002F0.personas\u002F02-head-of-cyber-harry",{"title":240,"path":241,"stem":242},"Security Architect - Sasha","\u002Fdesign\u002Fpersonas\u002F03-security-architect-sasha","4.design\u002F0.personas\u002F03-security-architect-sasha",{"title":244,"path":245,"stem":246},"Procurement Officer - Paige","\u002Fdesign\u002Fpersonas\u002F04-procurement-officer-paige","4.design\u002F0.personas\u002F04-procurement-officer-paige",{"title":248,"path":249,"stem":250},"Design Thinking","\u002Fdesign\u002Fdesign-thinking","4.design\u002F1.design-thinking",{"title":252,"path":253,"stem":254},"Design & Development","\u002Fdesign\u002Fdesign-and-development","4.design\u002F3.design-and-development",{"title":256,"path":257,"stem":258},"Branding","\u002Fdesign\u002Fbranding","4.design\u002F4.branding",{"title":217,"path":260,"stem":261},"\u002Fdesign\u002Ftools","4.design\u002F5.tools",{"title":263,"path":264,"stem":265},"Customer Success","\u002Fdesign\u002Fworking-with-customers","4.design\u002F6.working-with-customers",{"title":267,"icon":268,"path":269,"stem":270,"children":271,"page":67},"Sales","i-lucide-dollar-sign","\u002Fsales","4.sales",[272,276],{"title":273,"path":274,"stem":275},"Customer Onboarding","\u002Fsales\u002Fonboarding","4.sales\u002Fonboarding",{"title":277,"path":278,"stem":279},"Sales Tools","\u002Fsales\u002Ftools","4.sales\u002Ftools",{"title":281,"icon":282,"path":283,"stem":284,"children":285,"page":67},"Marketing","i-lucide-book-image","\u002Fmarketing","5.marketing",[286,290,294,297],{"title":287,"path":288,"stem":289},"Content","\u002Fmarketing\u002Fcontent","5.marketing\u002Fcontent",{"title":291,"path":292,"stem":293},"Messaging","\u002Fmarketing\u002Fmessaging","5.marketing\u002Fmessaging",{"title":217,"path":295,"stem":296},"\u002Fmarketing\u002Ftools","5.marketing\u002Ftools",{"title":298,"path":299,"stem":300},"Website","\u002Fmarketing\u002Fwebsite","5.marketing\u002Fwebsite",{"title":302,"icon":303,"path":304,"stem":305,"children":306,"page":67},"AI & Data Ops","i-lucide-database","\u002Fdata-ops","6.data-ops",[307,315,319,344,361],{"title":60,"path":308,"stem":309,"children":310,"page":67},"\u002Fdata-ops\u002Fcapability-exchange","6.data-ops\u002FCapability Exchange",[311],{"title":312,"path":313,"stem":314},"Leaderboard Calculation","\u002Fdata-ops\u002Fcapability-exchange\u002Fleaderboard-calculation","6.data-ops\u002FCapability Exchange\u002Fleaderboard-calculation",{"title":316,"path":317,"stem":318},"Account Portal (CAS)","\u002Fdata-ops\u002Faccount-portal","6.data-ops\u002Faccount-portal",{"title":320,"path":321,"stem":322,"children":323,"page":67},"Data Management","\u002Fdata-ops\u002Fdata-management","6.data-ops\u002Fdata-management",[324,328,332,336,340],{"title":325,"path":326,"stem":327},"Adding Products","\u002Fdata-ops\u002Fdata-management\u002Fadding-products","6.data-ops\u002Fdata-management\u002Fadding-products",{"title":329,"path":330,"stem":331},"Adding Vendors","\u002Fdata-ops\u002Fdata-management\u002Fadding-vendors","6.data-ops\u002Fdata-management\u002Fadding-vendors",{"title":333,"path":334,"stem":335},"Framework Mapping","\u002Fdata-ops\u002Fdata-management\u002Fframework-mapping","6.data-ops\u002Fdata-management\u002Fframework-mapping",{"title":337,"path":338,"stem":339},"Refreshing Vendors","\u002Fdata-ops\u002Fdata-management\u002Frefreshing-vendors","6.data-ops\u002Fdata-management\u002Frefreshing-vendors",{"title":341,"path":342,"stem":343},"Reviewing Draft Vendors","\u002Fdata-ops\u002Fdata-management\u002Freviewing-draft-vendors","6.data-ops\u002Fdata-management\u002Freviewing-draft-vendors",{"title":345,"path":346,"stem":347,"children":348,"page":67},"LLM Ops","\u002Fdata-ops\u002Fllm-ops","6.data-ops\u002Fllm-ops",[349,353,357],{"title":350,"path":351,"stem":352},"Agents","\u002Fdata-ops\u002Fllm-ops\u002Fagents","6.data-ops\u002Fllm-ops\u002F1.agents",{"title":354,"path":355,"stem":356},"ESPi Architecture & Query Flow","\u002Fdata-ops\u002Fllm-ops\u002Fespi-architecture","6.data-ops\u002Fllm-ops\u002F2.espi-architecture",{"title":358,"path":359,"stem":360},"Evaluating Agents","\u002Fdata-ops\u002Fllm-ops\u002Fevaluations","6.data-ops\u002Fllm-ops\u002F3.evaluations",{"title":362,"path":363,"stem":364},"Message Queues","\u002Fdata-ops\u002Fmessage-queues","6.data-ops\u002Fmessage-queues",{"title":366,"path":367,"stem":368},"Glossary","\u002Fglossary","glossary",{"id":370,"title":148,"body":371,"description":409,"extension":538,"links":539,"meta":540,"navigation":541,"path":149,"seo":542,"stem":150,"__hash__":543},"docs\u002F3.engineering\u002Fcontributing\u002Ffront-end\u002Ftesting.md",{"type":372,"value":373,"toc":529},"minimark",[374,379,383,387,392,397,400,403,426,429,441,449,456,468,472,475,489,492,504,508,512,525],[375,376,378],"h2",{"id":377},"unit-tests","Unit Tests",[380,381,382],"p",{},"As a standard practice we do not write unit tests for the front-end code, however there is a strict requirement for E2E tests to be written for all new features and bug fixes.",[375,384,386],{"id":385},"e2e-tests","E2E Tests",[388,389,391],"h3",{"id":390},"running-e2e-tests","Running E2E Tests",[393,394,396],"h4",{"id":395},"local-development-environment","Local Development Environment",[380,398,399],{},"When running the E2E tests against your local development environment, where you are running the front-end server directly, you can run the E2E tests by running the following commands:",[380,401,402],{},"Run the web server:",[404,405,410],"pre",{"className":406,"code":407,"language":408,"meta":409,"style":409},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","yarn dev\n","bash","",[411,412,413],"code",{"__ignoreMap":409},[414,415,418,422],"span",{"class":416,"line":417},"line",1,[414,419,421],{"class":420},"sBMFI","yarn",[414,423,425],{"class":424},"sfazB"," dev\n",[380,427,428],{},"Run the E2E tests:",[404,430,432],{"className":406,"code":431,"language":408,"meta":409,"style":409},"yarn test:e2e:run-node-local\n",[411,433,434],{"__ignoreMap":409},[414,435,436,438],{"class":416,"line":417},[414,437,421],{"class":420},[414,439,440],{"class":424}," test:e2e:run-node-local\n",[380,442,443,444,448],{},"This will run ",[445,446,447],"em",{},"all"," of the E2E tests against your local development environment.",[380,450,451,452,455],{},"If you want to run just a few tests, or see the tests explicitely running in a browser, you can ",[445,453,454],{},"open"," the E2E tests by running the following command:",[404,457,459],{"className":406,"code":458,"language":408,"meta":409,"style":409},"yarn test:e2e:dev-node-local\n",[411,460,461],{"__ignoreMap":409},[414,462,463,465],{"class":416,"line":417},[414,464,421],{"class":420},[414,466,467],{"class":424}," test:e2e:dev-node-local\n",[393,469,471],{"id":470},"docker","Docker",[380,473,474],{},"To run all fo the E2E tests in a Docker container, run the following command:",[404,476,480],{"className":477,"code":478,"language":479,"meta":409,"style":409},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","yarn test:e2e:run\n","sh",[411,481,482],{"__ignoreMap":409},[414,483,484,486],{"class":416,"line":417},[414,485,421],{"class":420},[414,487,488],{"class":424}," test:e2e:run\n",[380,490,491],{},"To run the E2E tests in a Docker container and see the tests explicitely running in Cypress for debugging, run the following command:",[404,493,495],{"className":477,"code":494,"language":479,"meta":409,"style":409},"yarn test:e2e:dev\n",[411,496,497],{"__ignoreMap":409},[414,498,499,501],{"class":416,"line":417},[414,500,421],{"class":420},[414,502,503],{"class":424}," test:e2e:dev\n",[388,505,507],{"id":506},"writing-e2e-tests","Writing E2E Tests",[393,509,511],{"id":510},"defining-selectors","Defining Selectors",[380,513,514,515,518,519,524],{},"We use a couple of tools that require easy selection\u002Fsearching of DOM node elements in our rendered content. We have a standard for tagging DOM elements with ",[411,516,517],{},"data-"," attributes to make node selection easier. These standards are also shared for DOM selection in PostHog, and the details can be found in hte Handbook ",[520,521,523],"a",{"href":522},"..\u002F..\u002Fplatform-ops#report-tagging-and-taxonomy","here",".",[526,527,528],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":409,"searchDepth":530,"depth":530,"links":531},2,[532,533],{"id":377,"depth":530,"text":378},{"id":385,"depth":530,"text":386,"children":534},[535,537],{"id":390,"depth":536,"text":391},3,{"id":506,"depth":536,"text":507},"md",null,{},true,{"description":409},"dRWXrEl9_wpxU0uUjGBR6UEtfYe2ZJ0Mw3-Tp4Bk8Yc",[545,547],{"title":139,"path":140,"stem":141,"description":546,"children":-1},"Step-by-step guide for backend developers on adding new prompts, modifying existing prompts across platform-api and api-cps, integrating with Langfuse and esp-prompts, Quartz reload scheduling, and coordinating Data\u002FAI team benchmarking.",{"title":152,"path":153,"stem":154,"description":548,"children":-1},"Accessing the production database in rollback situations.",1790076749215]