Cypress provides a testing API that makes it easier to write cross-browser tests in both JavaScript and TypeScript<\/a>. Write test scripts once and execute them on Chrome, Safari, Edge, Opera, Firefox, and many other popular browsers! <\/p>\n\n\n\n There are at least three good reasons to use Cypress with TypeScript:<\/p>\n\n\n\n While TypeScript offers several benefits, it also introduces a few challenges. Its learning curve is steeper than JavaScript\u2019s and can make writing tests a bit slower. The main problem, however, is that adding TypeScript to the Cypress test environment requires some initial effort. Avoid that headache with our complete Cypress TypeScript setup guide!<\/p>\n\n\n\n Follow this step-by-step tutorial and learn how to create a Cypress project for TypeScript E2E testing.<\/p>\n\n\n\n Open the terminal and create a In a real-world example, give the directory a more appropriate name.<\/p>\n\n\n\n Enter it:<\/p>\n\n\n And launch the command below to initialize an npm project:<\/p>\n\n\n Great! Your Make sure to meet the Cypress system requirements<\/a> before proceeding.<\/p>\n\n\n\n Now, add Cypress to your project\u2019s dependencies with:<\/p>\n\n\n The above command will install Open Cypress with:<\/p>\n\n\n The first time you launch this command, it will start a setup wizard:<\/p>\n\n\n\n Here you can see the new features available in the latest version of Cypress. Click \u201cContinue >\u201d to move on.<\/p>\n\n\n\n In the next view, select the type of testing project you want to initialize:<\/p>\n\n\n\n In this example, go for \u201cE2E testing,\u201d which is the most common scenario.<\/p>\n\n\n\n This will initialize the following file structure in the root folder of your project:<\/p>\n\n\n You will be notified of that operation by the window below:<\/p>\n\n\n\n Again, click the \u201cContinue\u201d button.<\/p>\n\n\n\n You will now be asked to select the browser you want to launch your tests on. Ignore that and close all the open windows.<\/p>\n\n\n\n Fantastic! You now have a Cypress project in place. Time to add TypeScript.<\/p>\n\n\n\n First, add TypeScript to your project\u2019s dependencies with:<\/p>\n\n\n This will install Nest, initialize a TypeScript configuration file with:<\/p>\n\n\n That will create a Note<\/strong>: You may need to restart your IDE\u2019s TypeScript server after adding Wonderful! You have everything required to write your first Cypress Typescript script.<\/p>\n\n\n\n Open Cypress again:<\/p>\n\n\n Choose \u201cE2E Testing\u201d and reach the browser selection view again:<\/p>\n\n\n\n In this example, we are going to choose \u201cChrome,\u201d but any other browser will do. Click \u201cStart E2E Testing in Chrome.\u201d<\/p>\n\n\n\n This will open the Cypress spec file creation modal:<\/p>\n\n\n\n Give your test a name, being careful to specify Note<\/strong>: If you are not familiar with Cypress, Cypress will initialize the following sample spec for you inside the It will also launch it by default. So, you will see:<\/p>\n\n\n\n Here, you can verify that the Cypress TypeScript test simply tries to visit an example page.<\/p>\n\n\n\n Update your script with some testing logic:<\/p>\n\n\n This simple test verifies that the Cypress will automatically detect the changes and run the new testing logic for you:<\/p>\n\n\n\n Perfect, the test works as expected.<\/p>\n\n\n\n Now, suppose you get confused between Thanks to the TypeScript integration, the IDE will immediately warn you about the error. This helps make the test more robust and saves time waiting for Cypress to report the error:<\/p>\n\n\n\n Et voil\u00e0! You just learned how to use Cypress with TypeScript to take your E2E testing process to the next level!<\/p>\n\n\n\n Cypress offers full TypeScript integration, also supporting the definition of custom commands and assertions.<\/p>\n\n\n\n For new commands, all you have to do is specify the custom logic as explained in the docs<\/a> and then add the required TypeScript type declaration files inside the As for custom assertions, you need to define them through the Chai language<\/a> and then extend the TypeScript assertion types to make the compiler understand the new methods. Find out more in the doc<\/a>.<\/p>\n\n\n\n In this article, you looked at what Cypress is and how to integrate it with TypeScript. As seen here, writing E2E tests in TypeScript brings several benefits, and setting up a Cypress TypeScript is not complex.<\/p>\n\n\n\n Through a step-by-step guide, you had the opportunity to learn how to use TypeScript in your Cypress scripts. Robust testing has never been easier!<\/p>\n\n\n\n Thanks for reading! We hope you found this article helpful!<\/p>\n","protected":false},"excerpt":{"rendered":" Let\u2019s see how to integrate Cypress with TypeScript in this guided tutorial!<\/p>\n","protected":false},"author":160,"featured_media":20256,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[31],"tags":[],"collections":[],"class_list":{"0":"post-23091","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-developer","8":"entry"},"yoast_head":"\nWhy Write Cypress Test Scripts in TypeScript<\/h2>\n\n\n\n
\n
Initializing a Cypress TypeScript Project<\/h2>\n\n\n\n
Step 1: Initialize an npm Project<\/h3>\n\n\n\n
cypress-typescript-demo<\/code> folder for your Cypress project:<\/p>\n\n\nmkdir cypress-typescript-demo<\/code><\/span><\/pre>\n\n\ncd cypress-typescript-demo<\/code><\/span><\/pre>\n\n\nnpm init -y <\/code><\/span><\/pre>\n\n\ncypress-typescript-demo<\/code> folder will now contain a package.json<\/code> file.<\/p>\n\n\n\nStep 2: Set Up Cypress<\/h3>\n\n\n\n
npm install cypress --save-dev<\/code><\/span><\/pre>\n\n\ncypress<\/code><\/a> locally as a dev dependency in the project. It may take a while, so be patient.<\/p>\n\n\n\nnpx cypress open<\/code><\/span><\/pre>\n\n\n![\"The](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1024x684.png\")
![\"Selecting](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1-1024x684.png\")
\u251c\u2500\u2500 cypress<\/span>.config<\/span>.js<\/span>\n\u2514\u2500\u2500 cypress<\/span>\n \u251c\u2500\u2500 downloads<\/span>\n \u251c\u2500\u2500 e2e<\/span>\n \u251c\u2500\u2500 fixtures<\/span>\n \u2514\u2500\u2500 support<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n![\"The](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-2-1024x684.png\")
Step 3: Configure TypeScript<\/h3>\n\n\n\n
npm install typescript --save-dev<\/code><\/span><\/pre>\n\n\ntypescript<\/code><\/a> locally as a dev dependency in the project.<\/p>\n\n\n\nnpx tsc --init<\/code><\/span><\/pre>\n\n\ntsconfig.json<\/code> in the root of your project. Open it and replace its content with:<\/p>\n\n\n{\n \"compilerOptions\"<\/span>: {\n \"target\"<\/span>: \"es5\"<\/span>,\n \"lib\"<\/span>: [\"es5\"<\/span>, \"dom\"<\/span>],\n \"types\"<\/span>: [\"cypress\"<\/span>, \"node\"<\/span>]\n },\n \"include\"<\/span>: [\"**\/*.ts\"<\/span>]\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\ntarget<\/code> instructs the TypeScript compiler to compile the TS application into an ECMAScript 5 JavaScript application. Instead, \"types\"<\/code> tells the compiler to include only Cypress and Node.js type definitions.<\/p>\n\n\n\ntsconfig.json<\/code>.<\/p>\n\n\n\nStep 4: Create Your First Cypress TypeScript Script<\/h3>\n\n\n\n
npx cypress open<\/code><\/span><\/pre>\n\n\n![\"Selecting](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-3-1024x684.png\")
![\"Giving](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-4.png\")
.ts<\/code> as the extension so that it will be treated as a TypeScript file by your IDE. Then, click \u201cCreate spec.\u201d<\/p>\n\n\n\n.spec<\/code><\/a> files<\/a> are the test files that contain the testing logic.<\/p>\n\n\n\n.\/cypress\/e2e<\/code> folder:<\/p>\n\n\ndescribe('template spec'<\/span>, () => {\n it('passes'<\/span>, () => {\n cy.visit('https:\/\/example.cypress.io'<\/span>)\n })\n})<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n![\"The](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-5-1024x547.png\")
Step 5: Customize Your Test Logic in TypeScript<\/h3>\n\n\n\n
describe('template spec'<\/span>, () => {\n it('Contains \"Kitchen Sink\"'<\/span>, () => {\n cy.visit('https:\/\/example.cypress.io'<\/span>)\n\n \/\/ verify that the h1 element contains the expected string<\/span>\n const<\/span> title = 'Kitchen Sink'<\/span>\n const<\/span> titleElement = cy.get('h1'<\/span>).first()\n titleElement.should('include.text'<\/span>, title)\n })\n})<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n<h1><\/code> element of the test page seen earlier contains the \u201cKitchen Sink\u201d string.<\/p>\n\n\n\n![\"The](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-6-1024x547.png\")
title<\/code> and titleElement<\/code>. You may end up writing some broken code:<\/p>\n\n\n\n![\"The](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-7.png\")
![\"Cypress](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-8.png\")
Bonus: Define Custom Cypress Commands and Assertions in TypeScript<\/h2>\n\n\n\n
.\/cypress\/support<\/code> folder. Check out the \u201dTypes for Custom Commands\u201d<\/a> chapter from the official documentation for complete examples.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n