Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - The Future of Testing with Cypress

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about the future of testing with Cypress — what it is, how to use it, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Deque__Sponsor_9" name="Deque__Sponsor_9"></a>Deque - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at <a href= "https://deque.com/axe/?utm_source=syntax&utm_medium=podcast&utm_campaign=axe_extension">deque.com/axe</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:55 - What Is Cypress?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18">A visual testing studio that uses a jQuery-like syntax to test your application in browser.</li> <li class="has-line-data" data-line-start="18" data-line-end="20"> Very modern testing solution.</li> </ul> <p class="has-line-data" data-line-start="20" data-line-end="21"> 07:36 - Used to be only Chrome</p> <ul> <li class="has-line-data" data-line-start="21" data-line-end="23"> Now available for Safari, Firefox, Edge, etc.</li> </ul> <p class="has-line-data" data-line-start="23" data-line-end="24"> ??? - What frameworks is it for?</p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="25"> Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Can also run on ci/cd via a headless mode.</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> React component testing is experimental.</li> </ul> <p class="has-line-data" data-line-start="28" data-line-end="29"> 10:58 - Automation</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="31"> Cypress studio new feature that writes tests for you.</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 12:37 - Data</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="34"> Intercept + Fixtures or through plugins</li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 15:01 - Cost?</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> It’s free!</li> <li class="has-line-data" data-line-start="36" data-line-end="38"> There is a paid product called Cypress Dashboard that allows you to record tests long-term.</li> </ul> <h2 class="code-line" data-line-start="38" data-line-end="39"> <a id="Links_38" name="Links_38"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://www.cypress.io/">Cypress</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://bos.af/">bos.af</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://jestjs.io/">Jest</a></li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <a href="https://folivora.ai/">Better Touch Tool</a></li> </ul> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="Tweet_us_your_tasty_treats_44" name= "Tweet_us_your_tasty_treats_44"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about the future of testing with Cypress — what it is, how to use it, and more!
 Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes 03:55 - What Is Cypress?
 A visual testing studio that uses a jQuery-like syntax to test your application in browser.
 Very modern testing solution.
  07:36 - Used to be only Chrome
  Now available for Safari, Firefox, Edge, etc.
  ??? - What frameworks is it for?
  Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results.
 Can also run on ci/cd via a headless mode.
 React component testing is experimental.
  10:58 - Automation
  Cypress studio new feature that writes tests for you.
  12:37 - Data
  Intercept + Fixtures or through plugins
  15:01 - Cost?
  It’s free!
 There is a paid product called Cypress Dashboard that allows you to record tests long-term.
  Links  Cypress

 bos.af

 Jest

 Better Touch Tool

  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Hasty Treat - The Future of Testing with Cypress

Poslechněte si podcast