<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>end-to-end tests Archives - Yumasoft</title>
	<atom:link href="https://blog.yumasoft.pl/tag/end-to-end-tests/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.yumasoft.pl/tag/end-to-end-tests/</link>
	<description>Software development blog</description>
	<lastBuildDate>Sun, 05 Sep 2021 08:46:06 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://blog.yumasoft.pl/wp-content/uploads/2021/05/cropped-yumasoft_icon_transparent-32x32.png</url>
	<title>end-to-end tests Archives - Yumasoft</title>
	<link>https://blog.yumasoft.pl/tag/end-to-end-tests/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Run Cypress Tests From NUnit Test (C#)</title>
		<link>https://blog.yumasoft.pl/2021/09/run-cypress-tests-from-nunit-test-csharp/</link>
					<comments>https://blog.yumasoft.pl/2021/09/run-cypress-tests-from-nunit-test-csharp/#comments</comments>
		
		<dc:creator><![CDATA[Dawid Sibiński]]></dc:creator>
		<pubDate>Mon, 13 Sep 2021 13:00:00 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[end-to-end tests]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[software testing]]></category>
		<category><![CDATA[testing]]></category>
		<category><![CDATA[tests]]></category>
		<category><![CDATA[typescript]]></category>
		<guid isPermaLink="false">https://blog.yumasoft.pl/?p=623</guid>

					<description><![CDATA[<p>In one of our projects, we recently started using Cypress for end-to-end testing. Cypress executes tests written in JavaScript or TypeScript. However, we wanted to first perform some data-preparation operations using C#. In fact, we needed to run Cypress tests from NUnit C# tests. In this article, I&#8217;m sharing how this can be done ?&#8230;</p>
<p>The post <a rel="nofollow" href="https://blog.yumasoft.pl/2021/09/run-cypress-tests-from-nunit-test-csharp/">Run Cypress Tests From NUnit Test (C#)</a> appeared first on <a rel="nofollow" href="https://blog.yumasoft.pl">Yumasoft</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">In one of our projects, we recently started using <a href="https://www.cypress.io/">Cypress</a> for end-to-end testing. Cypress executes tests written in JavaScript or TypeScript. However, we wanted to first perform some data-preparation operations using C#. In fact, we needed to run Cypress tests from NUnit C# tests.</p>



<p class="wp-block-paragraph">In this article, I&#8217;m sharing how this can be done ? It will also be useful if you use another testing framework than NUnit, but the examples are based on it.</p>



<span id="more-623"></span>



<h2 class="wp-block-heading">Starting point</h2>



<p class="wp-block-paragraph">You can find the code accompanying this article here: <a href="https://github.com/dsibinski/cypress-csharp-example">https://github.com/dsibinski/cypress-csharp-example</a></p>



<p class="wp-block-paragraph">Our starting point is a React application with Cypress tests:</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="888" height="332" src="https://blog.yumasoft.pl/wp-content/uploads/2021/09/1_WebAppCypressTest.png" alt="React app with Cypress test" class="wp-image-628" srcset="https://blog.yumasoft.pl/wp-content/uploads/2021/09/1_WebAppCypressTest.png 888w, https://blog.yumasoft.pl/wp-content/uploads/2021/09/1_WebAppCypressTest-300x112.png 300w, https://blog.yumasoft.pl/wp-content/uploads/2021/09/1_WebAppCypressTest-768x287.png 768w" sizes="(max-width: 888px) 100vw, 888px" /></figure></div>



<p class="wp-block-paragraph">I assume that your tests specs are placed within <code>cypress/integration</code> folder. The only spec we have is called <code>submit_spec.ts</code> and it placed in a subfolder called <code>form</code>.</p>



<p class="wp-block-paragraph">Now imagine, that your backend is written in C#. Maybe you&#8217;d like to perform some data initialization <em>before </em>Cypress tests are executed.</p>



<p class="wp-block-paragraph">In our case, we have a C# backend, and we&#8217;ve already had a mechanism for running integration tests. This mechanism runs our server app with an in-memory database, which makes the maintenance of tests very easy.</p>



<p class="wp-block-paragraph">We wanted to use the same mechanism for our new, E2E Cypress tests. It means that we would be able to write some C# initialization code (data creation mostly) and then run Cypress tests from NUnit test.</p>



<p class="wp-block-paragraph">What we want to achieve is to have a C#-Cypress NUnit test look as follows:</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="382" height="162" src="https://blog.yumasoft.pl/wp-content/uploads/2021/09/2_RunningCypressTestFromCSharpIdea.png" alt="The picture shows how to run cypress tests from nunit by only calling RunCypressTest(&quot;form/submit_spec.ts&quot;) - the method we will add soon" class="wp-image-630" srcset="https://blog.yumasoft.pl/wp-content/uploads/2021/09/2_RunningCypressTestFromCSharpIdea.png 382w, https://blog.yumasoft.pl/wp-content/uploads/2021/09/2_RunningCypressTestFromCSharpIdea-300x127.png 300w" sizes="(max-width: 382px) 100vw, 382px" /></figure></div>



<p class="wp-block-paragraph">Let&#8217;s now see how we can implement the <code>RunCypressTest</code> method ?</p>



<h2 class="wp-block-heading">Implementing a method to run Cypress tests from NUnit</h2>



<p class="wp-block-paragraph">To make things easier, let&#8217;s create a base class all our test classes can use. We&#8217;ll call it <code>CypressTestsBase</code> and add a <code>RunCypressTest</code> method to it: </p>



<script src="https://gist.github.com/dsibinski/70631294e17f4a0230f4fdbbfbc71fe1.js"></script>



<p class="wp-block-paragraph">This code does the job. Few interesting parts:</p>



<ul class="wp-block-list"><li>Line 12 &#8211; I&#8217;m getting there the path to the web app workspace where <code>npx cypress run</code> command can be executed. It might be more complicated in your scenario, so you should adjust accordingly here</li><li>Lines 13-20: thanks to setting <code>RedirectStandardInput</code> to <code>true</code>, we can later execute a custom command via <code>cmd</code>; setting <code>RedirectStandardOutput</code> to <code>true</code> allows us to write everything <code>npx cypress run</code> command does to NUnit test&#8217;s output</li><li>Line 28: <code>TestContext.Out.WriteLine(cypressProcessOutput);</code> actually writes the Cypress output to NUnit test result</li><li>Line 29: here we handle errors during Cypress execution. <code>npx cypress run</code> executed via <code>cmd</code> will return a code different from 0 if anything goes wrong.</li></ul>



<p class="wp-block-paragraph">We can now change <code>FormTests</code> class to run its corresponding Cypress test:</p>



<script src="https://gist.github.com/dsibinski/758bee0d1f3cee14375ebe65b393d5ef.js"></script>



<p class="wp-block-paragraph">Finally, it allows to run our C# test, which then runs its corresponding Cypress spec and prints the output:</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img decoding="async" src="https://blog.yumasoft.pl/wp-content/uploads/2021/09/3_CypressTestResultInNUnitResult-1.png" alt="Run Cypress tests from NUnit - sample passed test in JetBrains Rider" class="wp-image-638" width="706" height="307" srcset="https://blog.yumasoft.pl/wp-content/uploads/2021/09/3_CypressTestResultInNUnitResult-1.png 706w, https://blog.yumasoft.pl/wp-content/uploads/2021/09/3_CypressTestResultInNUnitResult-1-300x130.png 300w" sizes="(max-width: 706px) 100vw, 706px" /></figure></div>



<h2 class="wp-block-heading">Cypress errors in NUnit result</h2>



<p class="wp-block-paragraph">Let&#8217;s see what happens if something is broken on Cypress/web app&#8217;s side. Let&#8217;s run our test, but with our web app not running.</p>



<p class="wp-block-paragraph">The NUnit test fails, and we can clearly see what was wrong:</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="999" height="323" src="https://blog.yumasoft.pl/wp-content/uploads/2021/09/4_CypressTestFailedNUnitResult.png" alt="Run Cypress tests from NUnit - failed test in JetBrains Rider, all details from cypress visible" class="wp-image-640" srcset="https://blog.yumasoft.pl/wp-content/uploads/2021/09/4_CypressTestFailedNUnitResult.png 999w, https://blog.yumasoft.pl/wp-content/uploads/2021/09/4_CypressTestFailedNUnitResult-300x97.png 300w, https://blog.yumasoft.pl/wp-content/uploads/2021/09/4_CypressTestFailedNUnitResult-768x248.png 768w" sizes="auto, (max-width: 999px) 100vw, 999px" /></figure></div>



<p class="wp-block-paragraph">You will see similar errors if something goes wrong in a Cypress test. Cypress also <a href="https://docs.cypress.io/guides/guides/screenshots-and-videos">saves compressed videos and screenshots</a>, so if something goes wrong, diagnosing such failed tests is very easy.</p>



<h2 class="wp-block-heading">Summary</h2>



<p class="wp-block-paragraph">I hope you found this article on how to run Cypress tests from NUnit useful. Remember that it not only works with NUnit &#8211; it will be suitable for any testing framework. You might need to adjust some parts of the solution, e.g. printing the results to the test result&#8217;s output.</p>



<p class="wp-block-paragraph">This solution allowed us to improve our testing by adding a new type of tests to our <a href="https://blog.yumasoft.pl/2021/07/how-to-configure-jest-tests-on-teamcity/">pipeline</a>. Right next to <a href="https://blog.yumasoft.pl/2021/07/why-naming-tests-matters/">proper naming</a> and <a href="https://blog.yumasoft.pl/2021/08/make-your-tests-bulletproof-with-mutation-testing/">mutation testing</a>, E2E tests add another layer of security and improve the quality of our software.</p>



<p class="wp-block-paragraph">Once more, you can find the complete source code <a href="https://github.com/dsibinski/cypress-csharp-example">here</a>. If you want, feel free to copy it and change it according to your needs ?</p>
<p>The post <a rel="nofollow" href="https://blog.yumasoft.pl/2021/09/run-cypress-tests-from-nunit-test-csharp/">Run Cypress Tests From NUnit Test (C#)</a> appeared first on <a rel="nofollow" href="https://blog.yumasoft.pl">Yumasoft</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.yumasoft.pl/2021/09/run-cypress-tests-from-nunit-test-csharp/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
