{"id":23103,"date":"2023-09-22T09:00:00","date_gmt":"2023-09-22T07:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=23103"},"modified":"2023-10-25T11:20:42","modified_gmt":"2023-10-25T09:20:42","slug":"come-mettere-in-piedi-un-progetto-cypress-in-typescript","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/","title":{"rendered":"Come mettere in piedi un progetto Cypress in TypeScript"},"content":{"rendered":"\n<p>Essere certi che le vostre applicazioni web funzionino senza intoppi su browser diversi \u00e8 ormai fondamentale. Ecco <strong>dove entra in gioco Cypress<\/strong>. Questo framework per il testing end-to-end <strong>si \u00e8 guadagnato popolarit\u00e0 grazie alla sua semplicit\u00e0, i suoi feedback in tempo reale e robuste capacit\u00e0 di testing. <\/strong>Segui questa guida per imparare come mettere in piedi un progetto Cypress in TypeScript e rendere i vostri script di testing ancora pi\u00f9 affidabili.<\/p>\n\n\n\n<p>Qui, ti guideremo attraverso il<strong> processo di creazione di un progetto Cypress da zero e della sua integrazione con TypeScript<\/strong>. Iniziamo!<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-51300143      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tIndice\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#cos\u00e8-cypress\" class=\"uagb-toc-link__trigger\">Cos\u2019\u00e8 Cypress?<\/a><li class=\"uagb-toc__list\"><a href=\"#buoni-motivi-per-scrivere-script-di-testing-con-cypress-in-typescript\" class=\"uagb-toc-link__trigger\">Buoni motivi per scrivere script di testing con Cypress in TypeScript<\/a><li class=\"uagb-toc__list\"><a href=\"#inizializzazione-di-un-progetto-cypress-con-typescript\" class=\"uagb-toc-link__trigger\">Inizializzazione di un progetto Cypress con TypeScript<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#passo-1-crea-un-progetto-npm\" class=\"uagb-toc-link__trigger\">Passo 1: Crea un progetto npm<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#passo-2-configura-cypress\" class=\"uagb-toc-link__trigger\">Passo 2: Configura Cypress<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#passo-3-aggiungi-typescript\" class=\"uagb-toc-link__trigger\">Passo 3: Aggiungi TypeScript<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#passo-4-genera-il-tuo-primo-script-cypress-in-typescript\" class=\"uagb-toc-link__trigger\">Passo 4: Genera il tuo primo script Cypress in TypeScript<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#passo-5-personalizza-la-logica-di-testing-in-typescript\" class=\"uagb-toc-link__trigger\">Passo 5: Personalizza la logica di testing in TypeScript<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#bonus-definizione-di-comandi-e-asserzioni-cypress-personalizzate-in-typescript\" class=\"uagb-toc-link__trigger\">Bonus: Definizione di comandi e asserzioni Cypress personalizzate in TypeScript<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusioni\" class=\"uagb-toc-link__trigger\">Conclusioni<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"gb-headline gb-headline-3d56bce2 gb-headline-text\">Cos\u2019\u00e8 Cypress?<\/h2>\n\n\n\n<p><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.cypress.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Cypress<\/a>\u00a0<strong>\u00e8 un framework basato su JavaScript per il testing di componenti end-to-end<\/strong>. Questa tecnologia open-source \u00e8 progettata per il web moderno ed \u00e8 pensata per semplificare e ottimizzare la scrittura, l\u2019esecuzione e il debug di test per le applicazioni web. Per chi ha familiarit\u00e0 con queste tecnologie, si tratta di qualcosa di simile a <a href=\"https:\/\/writech.run\/blog\/how-to-set-up-playwright-in-python-79bc6c34113e\/\" class=\"ek-link\">Playwright<\/a>.<\/p>\n\n\n\n<p>Cypress fornisce un\u2019API di testing che rende pi\u00f9 facile scrivere test cross-browser sia in <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/come-programmare-con-javascript-tutto-sul-linguaggio-per-il-web\/\" class=\"ek-link\">JavaScript<\/a> che in TypeScript. <strong>Scrivi gli script di testing una sola volta e eseguili <\/strong>su Chrome, Safari, Edge, Opera, Firefox e molti altri browser popolari!<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-aa0f73a3 gb-headline-text\">Buoni motivi per scrivere script di testing con Cypress in TypeScript<\/h2>\n\n\n\n<p>Ci sono almeno tre buone ragioni per utilizzare Cypress con TypeScript:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Maggiore robustezza grazie alla tipizzazione<\/strong>: I tipi riducono la possibilit\u00e0 di introdurre errori banali nei yuoi test, rendendoli meno instabili e pi\u00f9 robusti. Ci\u00f2 porta a una maggiore affidabilit\u00e0, poich\u00e9 \u00e8 meno probabile che i test falliscano a causa di problemi nel codice, come errori di tipo.<\/li>\n\n\n\n<li><strong>Miglior manutenibilit\u00e0 del codice<\/strong>: TypeScript migliora la leggibilit\u00e0 e la manutenibilit\u00e0 del codice fornendo un\u2019esperienza di sviluppo migliore rispetto a JavaScript. Inoltre, le funzionalit\u00e0 di auto-completamento e di type inference offerte dai moderni IDE semplificano la scrittura e la comprensione del codice dei test. Al crescere della della tua suite di test, mantenere una base di codice chiara e organizzata diventa cruciale.<\/li>\n\n\n\n<li><strong>Migliore collaborazione tra sviluppatori<\/strong>: Un linguaggio fortemente tipizzato come TypeScript incoraggia la scrittura di codice pi\u00f9 strutturato e documentato. Quando pi\u00f9 membri del team collaborano agli stessi test, i tipi aiutano a garantire che tutti comprendano gli input e gli output attesi per le funzioni e i componenti, riducendo gli errori e l\u2019onere comunicazionale.<\/li>\n<\/ul>\n\n\n\n<p>TypeScript offre sicuramente diversi vantaggi, ma <strong>\u00e8 importante notare che introduce anche alcune difficolt\u00e0<\/strong>. La sua curva di apprendimento \u00e8 pi\u00f9 <strong>ripida <\/strong>rispetto a quella di JavaScript e pu\u00f2 <strong>rallentare la scrittura dei test. <\/strong>Tuttavia, la sfida principale sta nell\u2019integrazione di TypeScript nell\u2019ambiente di testing di Cypress.<strong> Evita ogni problema con la nostra completa guida alla configurazione di TypeScript in Cypress!<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Lettura consigliata: <em><a href=\"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/8-motivi-per-conoscere-java\/\" class=\"ek-link\">8 ottimi motivi per cui tutti i dev devono conoscere Java<\/a><\/em><\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"gb-headline gb-headline-35243a06 gb-headline-text\">Inizializzazione di un progetto Cypress con TypeScript<\/h2>\n\n\n\n<p>Segui questo tutorial passo-passo e impara come creare un progetto Cypress per il testing E2E in TypeScript.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-7a305d8f gb-headline-text\">Passo 1: Crea un progetto npm<\/h3>\n\n\n\n<p>Apri il terminale e crea una cartella chiamata&nbsp;<code>cypress-typescript-demo<\/code>&nbsp;per il tuo progetto Cypress:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">mkdir cypress-typescript-demo<\/code><\/span><\/pre>\n\n\n<p>In un esempio reale, assegna un nome pi\u00f9 appropriato alla directory.<\/p>\n\n\n\n<p>Entra nella directory:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">cd cypress-typescript-demo<\/code><\/span><\/pre>\n\n\n<p>E lancia il comando seguente per inizializzare un progetto npm:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm init -y<\/code><\/span><\/pre>\n\n\n<p>Ottimo! La tua cartella&nbsp;<code>cypress-typescript-demo<\/code>&nbsp;conterr\u00e0 ora un file&nbsp;<code>package.json<\/code>.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-54b4c66d gb-headline-text\">Passo 2: Configura Cypress<\/h3>\n\n\n\n<p>Assicurati di soddisfare i&nbsp;<a href=\"https:\/\/docs.cypress.io\/guides\/getting-started\/installing-cypress#System-requirements\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">requisiti di sistema di Cypress<\/a>&nbsp;prima di procedere.<\/p>\n\n\n\n<p>Ora, aggiungi Cypress alle dipendenze del tuo progetto con:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install cypress --save-dev<\/code><\/span><\/pre>\n\n\n<p>Il comando qui sopra installer\u00e0&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/cypress\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>cypress<\/code><\/a>&nbsp;localmente come dipendenza di sviluppo nel progetto. Questa operazione potrebbe richiedere un po\u2019 di tempo.<\/p>\n\n\n\n<p>Apri Cypress con:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx cypress open<\/code><\/span><\/pre>\n\n\n<p>La prima volta che esegui questo comando, verrr\u00e0 lanciata una procedura guidata di configurazione:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1024x684.png\" alt=\"La schermata &quot;What's New in Cypress&quot;\" class=\"wp-image-23092\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1024x684.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-300x201.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-768x513.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-600x400.png 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">La schermata &#8220;What&#8217;s New in Cypress&#8221;<\/figcaption><\/figure>\n\n\n\n<p>Nello specifico, ti verr\u00e0 mostrata una vista con le nuove funzionalit\u00e0 disponibili nell\u2019ultima versione di Cypress. Clicca su \u201cContinua &gt;\u201d per procedere.<\/p>\n\n\n\n<p>Nella finestra successiva, seleziona il tipo di progetto di testing che desidera inizializzare:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1-1024x684.png\" alt=\"Selezione di &quot;E2E Testing&quot;\" class=\"wp-image-23094\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1-1024x684.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1-300x201.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1-768x513.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1-600x400.png 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-1.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Selezione di &#8220;E2E Testing&#8221;<\/figcaption><\/figure>\n\n\n\n<p>In questo esempio, opta per \u201cTesting E2E\u201d, che \u00e8 lo scenario pi\u00f9 comune.<\/p>\n\n\n\n<p>Questo inizializzer\u00e0 la seguente struttura dei file nella cartella del tuo progetto:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">cypress<\/span><span class=\"hljs-selector-class\">.config<\/span><span class=\"hljs-selector-class\">.js<\/span>\n\u2514\u2500\u2500 <span class=\"hljs-selector-tag\">cypress<\/span>\n    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">downloads<\/span>\n    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">e2e<\/span>\n    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">fixtures<\/span>\n    \u2514\u2500\u2500 <span class=\"hljs-selector-tag\">support<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Riceverai una notifica di questa operazione tramite la seguente finestra:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-2-1024x684.png\" alt=\"I file creati da Cypress\" class=\"wp-image-23095\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-2-1024x684.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-2-300x201.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-2-768x513.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-2-600x400.png 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-2.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">I file creati da Cypress<\/figcaption><\/figure>\n\n\n\n<p>Ancora una volta, clicca il pulsante \u201cContinua\u201d.<\/p>\n\n\n\n<p>Ti verr\u00e0 ora chiesto di selezionare il browser su cui vuoi eseguire i tuoi test. Ignoralo e chiudi tutte le finestre aperte.<\/p>\n\n\n\n<p>Fantastico! Ho hai un progetto Cypress su cui lavorare. \u00c8 ora di aggiungere TypeScript.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-9ff934f3 gb-headline-text\">Passo 3: Aggiungi TypeScript<\/h3>\n\n\n\n<p>Prima di tutto, aggiungi TypeScript alle dipendenze del tuo progetto con:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install typescript --save-dev<\/code><\/span><\/pre>\n\n\n<p>Questo installer\u00e0&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/typescript\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><code>typescript<\/code><\/a>&nbsp;localmente come dipendenza di sviluppo nella cartella del progetto.<\/p>\n\n\n\n<p>Successivamente, inizializza un file di configurazione TypeScript con:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx tsc --init<\/code><\/span><\/pre>\n\n\n<p>Questo creer\u00e0 un file&nbsp;<code>tsconfig.json<\/code>&nbsp;nella radice del progetto. Aprilo e sostituisci il suo contenuto con il seguente:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n  <span class=\"hljs-attr\">\"compilerOptions\"<\/span>: {\n    <span class=\"hljs-attr\">\"target\"<\/span>: <span class=\"hljs-string\">\"es5\"<\/span>,\n    <span class=\"hljs-attr\">\"lib\"<\/span>: &#91;<span class=\"hljs-string\">\"es5\"<\/span>, <span class=\"hljs-string\">\"dom\"<\/span>],\n    <span class=\"hljs-attr\">\"types\"<\/span>: &#91;<span class=\"hljs-string\">\"cypress\"<\/span>, <span class=\"hljs-string\">\"node\"<\/span>]\n  },\n  <span class=\"hljs-attr\">\"include\"<\/span>: &#91;<span class=\"hljs-string\">\"**\/*.ts\"<\/span>]\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>target<\/code>&nbsp;istruisce il compilatore TypeScript a compilare l\u2019applicazione TypeScript in un\u2019applicazione JavaScript ECMAScript 5. Inoltre,&nbsp;<code>\"types\"<\/code>&nbsp;indica al compilatore di includere solo le definizioni dei tipi di Cypress e Node.js.<\/p>\n\n\n\n<p><strong>Nota<\/strong>: Potresti dover riavviare il server TypeScript del tuo IDE dopo l\u2019aggiunta di&nbsp;<code>tsconfig.json<\/code>.<\/p>\n\n\n\n<p>Meraviglioso! Ora hai tutto il necessario per poter scrivere il tuoprimo script Cypress TypeScript.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-3e404284 gb-headline-text\">Passo 4: Genera il tuo primo script Cypress in TypeScript<\/h3>\n\n\n\n<p>Apri nuovamente Cypress con:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx cypress open<\/code><\/span><\/pre>\n\n\n<p>Scegli \u201cTesting E2E\u201d e raggiungi nuovamente la schermata di selezione del browser:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-3-1024x684.png\" alt=\"Selezione il browser\" class=\"wp-image-23096\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-3-1024x684.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-3-300x201.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-3-768x513.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-3-600x400.png 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-3.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Selezione il browser<\/figcaption><\/figure>\n\n\n\n<p>In questo esempio, sceglieremo \u201cChrome\u201d, ma qualsiasi altro browser andr\u00e0 bene. Clicca su \u201cStart E2E Testing in Chrome\u201d.<\/p>\n\n\n\n<p>Ci\u00f2 aprir\u00e0 il modulo di creazione di un file spec:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"877\" height=\"428\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-4.png\" alt=\"Dare un nome al test\" class=\"wp-image-23097\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-4.png 877w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-4-300x146.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-4-768x375.png 768w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><figcaption class=\"wp-element-caption\">Dare un nome al test<\/figcaption><\/figure>\n\n\n\n<p>Dai un nome al tuo test, facendo attenzione a specificare&nbsp;<code>**.ts**<\/code>&nbsp;come estensione in modo che venga trattato come un file TypeScript dal tuo IDE. Quindi, clicca su \u201cCreate spec\u201d.<\/p>\n\n\n\n<p><strong>Nota<\/strong>: Se non sei esperto di Cypress,&nbsp;<a href=\"https:\/\/docs.cypress.io\/guides\/core-concepts\/writing-and-organizing-tests#Spec-files\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">i file&nbsp;<code>.spec<\/code><\/a>&nbsp;sono i file di test che contengono la logica di testing.<\/p>\n\n\n\n<p>Cypress inizializzer\u00e0 il seguente spec di esempio all\u2019interno della cartella&nbsp;<code>.\/cypress\/e2e<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">describe(<span class=\"hljs-string\">'template spec'<\/span>, () =&gt; {\n  it(<span class=\"hljs-string\">'passes'<\/span>, () =&gt; {\n    cy.visit(<span class=\"hljs-string\">'https:\/\/example.cypress.io'<\/span>)\n  })\n})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>E lo avvier\u00e0 per te in automatico. Quindi, vedrai:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-5-1024x547.png\" alt=\"Il test viene eseguito automaticamente\" class=\"wp-image-23098\" style=\"width:732px;height:391px\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-5-1024x547.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-5-300x160.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-5-768x410.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-5-1536x821.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-5.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Il test viene eseguito automaticamente<\/figcaption><\/figure>\n\n\n\n<p>Qui, puoi verificare che il test Cypress TypeScript tenta semplicemente di visitare una pagina di esempio e lo facon successo.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-0b3c9738 gb-headline-text\">Passo 5: Personalizza la logica di testing in TypeScript<\/h3>\n\n\n\n<p>Aggiorna il tuo script con qualche logica aggiuntiva di testing:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">describe(<span class=\"hljs-string\">'template spec'<\/span>, () =&gt; {\n  it(<span class=\"hljs-string\">'Contains \"Kitchen Sink\"'<\/span>, () =&gt; {\n    cy.visit(<span class=\"hljs-string\">'https:\/\/example.cypress.io'<\/span>)\n\n    <span class=\"hljs-comment\">\/\/ Verifica che l'elemento h1 contenga la stringa prevista<\/span>\n    <span class=\"hljs-keyword\">const<\/span> title = <span class=\"hljs-string\">'Kitchen Sink'<\/span>\n    <span class=\"hljs-keyword\">const<\/span> titleElement = cy.get(<span class=\"hljs-string\">'h1'<\/span>).first()\n    titleElement.should(<span class=\"hljs-string\">'include.text'<\/span>, title)\n  })\n})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Questo semplice test verifica che l\u2019elemento&nbsp;<code>&lt;h1&gt;<\/code>&nbsp;della pagina di test contenga la stringa \u201cKitchen Sink\u201d.<\/p>\n\n\n\n<p>Cypress rilever\u00e0 automaticamente le modifiche ed eseguir\u00e0 la nuova logica di testing per voi:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-6-1024x547.png\" alt=\"Il test termina con successo\" class=\"wp-image-23099\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-6-1024x547.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-6-300x160.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-6-768x410.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-6-1536x821.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-6.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Il test termina con successo<\/figcaption><\/figure>\n\n\n\n<p>Perfetto, il test funziona come previsto.<\/p>\n\n\n\n<p>Ora, supponiamo che&nbsp;<code>title<\/code>&nbsp;e&nbsp;<code>titleElement<\/code>&nbsp;ti facciano confondere. Potresti quindi terminare per scrivere del codice errato come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"783\" height=\"336\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-7.png\" alt=\"L'IDE riporta l'errore\" class=\"wp-image-23100\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-7.png 783w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-7-300x129.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-7-768x330.png 768w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><figcaption class=\"wp-element-caption\">L&#8217;IDE riporta l&#8217;errore<\/figcaption><\/figure>\n\n\n\n<p>Grazie all\u2019integrazione di TypeScript, l\u2019IDE ti avvertir\u00e0 immediatamente dell\u2019errore, rendendo il test pi\u00f9 robusto. Inoltre, ti permette di risparmiare tempo evitando di dover attendere che Cypress segnali l\u2019errore:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"585\" height=\"661\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-8.png\" alt=\"Cypress riporta l'errore\" class=\"wp-image-23101\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-8.png 585w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/09\/image-8-266x300.png 266w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><figcaption class=\"wp-element-caption\">Cypress riporta l&#8217;errore<\/figcaption><\/figure>\n\n\n\n<p>Et voil\u00e0! Hai appena imparato come utilizzare Cypress con TypeScript per portare il tuo processo di testing E2E al livello successivo!<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-327aac65 gb-headline-text\">Bonus: Definizione di comandi e asserzioni Cypress personalizzate in TypeScript<\/h2>\n\n\n\n<p>Cypress offre un\u2019integrazione completa con TypeScript, supportando anche la definizione di comandi e asserzioni personalizzati.<\/p>\n\n\n\n<p>Per nuovi comandi, tutto ci\u00f2 che doevi fare \u00e8 specificare la logica personalizzata&nbsp;<a href=\"https:\/\/docs.cypress.io\/api\/cypress-api\/custom-commands\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">come spiegato nella documentazione<\/a>, e quindi aggiungere i file di dichiarazione dei tipi TypeScript richiesti nella cartella&nbsp;<code>.\/cypress\/support<\/code>. Consulta il capitolo&nbsp;<a href=\"https:\/\/docs.cypress.io\/guides\/tooling\/typescript-support#Types-for-Custom-Commands\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">\u201dTypes for Custom Commands\u201d<\/a>&nbsp;dalla documentazione ufficiale per degli esempi completi.<\/p>\n\n\n\n<p>Per quanto riguarda le asserzioni personalizzate, \u00e8 necessario definirle&nbsp;<a href=\"https:\/\/github.com\/cypress-io\/cypress-example-recipes\/tree\/master\/examples\/extending-cypress__chai-assertions\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">tramite il linguaggio Chai<\/a>&nbsp;e quindi estendere i tipi TypeScript relativi alle asserzioni per far comprendere al compilatore i nuovi metodi.&nbsp;<a href=\"https:\/\/docs.cypress.io\/guides\/tooling\/typescript-support#Types-for-custom-assertions\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Scopri di pi\u00f9 nella documentazione<\/a>.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-c9f14c35 gb-headline-text\">Conclusioni<\/h2>\n\n\n\n<p>In questo articolo, hai visto cos\u2019\u00e8 Cypress e come integrarlo con TypeScript. Come imparato qui, <strong>scrivere test E2E in TypeScript porta diversi vantaggi e la configurazione di Cypress TypeScript non \u00e8 complessa.<\/strong><\/p>\n\n\n\n<p>Attraverso questa guida passo-passo, hai avuto l\u2019opportunit\u00e0 di imparare come utilizzare TypeScript nei tuoi script Cypress. Il testing non \u00e8 mai stato cos\u00ec semplice!<\/p>\n\n\n\n<p><strong><em>Grazie per aver letto questo articolo! Speriamo che ti sia stato utile!<\/em><\/strong><\/p>\n\n\n<p><script src=\"https:\/\/codemotion.activehosted.com\/f\/embed.php?id=42\" type=\"text\/javascript\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Segui questo tutorial e impara come integrare TypeScript in Cypress!<\/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":[10307],"tags":[],"collections":[],"class_list":{"0":"post-23103","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-sviluppo-web","8":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Come creare un progetto Cypress in TypeScript da zero<\/title>\n<meta name=\"description\" content=\"Vediamo quali vantaggi pu\u00f2 portare TypeScript ai test Cypress e come configurare un progetto Cypress in TypeScript!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come mettere in piedi un progetto Cypress in TypeScript\" \/>\n<meta property=\"og:description\" content=\"Vediamo quali vantaggi pu\u00f2 portare TypeScript ai test Cypress e come configurare un progetto Cypress in TypeScript!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-22T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-25T09:20:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1194\" \/>\n\t<meta property=\"og:image:height\" content=\"878\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\"},\"headline\":\"Come mettere in piedi un progetto Cypress in TypeScript\",\"datePublished\":\"2023-09-22T07:00:00+00:00\",\"dateModified\":\"2023-10-25T09:20:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/\"},\"wordCount\":1328,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg\",\"articleSection\":[\"Sviluppo Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/\",\"name\":\"Come creare un progetto Cypress in TypeScript da zero\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg\",\"datePublished\":\"2023-09-22T07:00:00+00:00\",\"dateModified\":\"2023-10-25T09:20:42+00:00\",\"description\":\"Vediamo quali vantaggi pu\u00f2 portare TypeScript ai test Cypress e come configurare un progetto Cypress in TypeScript!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg\",\"width\":1194,\"height\":878,\"caption\":\"3D Web Vector Illustrations. Computer and account login and password form page on screen. Sign in to account, user authorization, login authentication page concept. Username, password fields.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sviluppo Web\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Come mettere in piedi un progetto Cypress in TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come creare un progetto Cypress in TypeScript da zero","description":"Vediamo quali vantaggi pu\u00f2 portare TypeScript ai test Cypress e come configurare un progetto Cypress in TypeScript!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/","og_locale":"en_US","og_type":"article","og_title":"Come mettere in piedi un progetto Cypress in TypeScript","og_description":"Vediamo quali vantaggi pu\u00f2 portare TypeScript ai test Cypress e come configurare un progetto Cypress in TypeScript!","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-09-22T07:00:00+00:00","article_modified_time":"2023-10-25T09:20:42+00:00","og_image":[{"width":1194,"height":878,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg","type":"image\/jpeg"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Antonello Zanini","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a"},"headline":"Come mettere in piedi un progetto Cypress in TypeScript","datePublished":"2023-09-22T07:00:00+00:00","dateModified":"2023-10-25T09:20:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/"},"wordCount":1328,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg","articleSection":["Sviluppo Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/","name":"Come creare un progetto Cypress in TypeScript da zero","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg","datePublished":"2023-09-22T07:00:00+00:00","dateModified":"2023-10-25T09:20:42+00:00","description":"Vediamo quali vantaggi pu\u00f2 portare TypeScript ai test Cypress e come configurare un progetto Cypress in TypeScript!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg","width":1194,"height":878,"caption":"3D Web Vector Illustrations. Computer and account login and password form page on screen. Sign in to account, user authorization, login authentication page concept. Username, password fields."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/come-mettere-in-piedi-un-progetto-cypress-in-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Sviluppo Web","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/"},{"@type":"ListItem","position":4,"name":"Come mettere in piedi un progetto Cypress in TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.","sameAs":["https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-600x600.jpg","author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg",1194,878,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-300x221.jpg",300,221,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-768x565.jpg",768,565,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-1024x753.jpg",1024,753,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg",1194,878,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg",1194,878,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg",100,74,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_comment_info":0,"uagb_excerpt":"Segui questo tutorial e impara come integrare TypeScript in Cypress!","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/23103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=23103"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/23103\/revisions"}],"predecessor-version":[{"id":24084,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/23103\/revisions\/24084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/20256"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=23103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=23103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=23103"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=23103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}