This is my archive

Software testing tools – Cypress.io vs Selenium comparison

Software testing is a part of the quality assurance process. The mentioned process consists of verifying by software testers all the functionalities implemented by developers work correctly. Based on that, testers provide information on the software quality and detected errors. Such an approach allows to identify errors, detect gaps and deficiencies in the requirements that must be met by the software. Software testing consists of verifying that all the functionalities implemented by developers work correctly. How to automate this process? The right software testing automated tool is the answer. But which one is right for you? Read this article to decide.

Why should you use software testing? 

  • Detect errors and defects during software development.

  • Help to avoid failures.

  • Ensure the effectiveness and high quality of the software or application.

  • Help reduce application maintenance costs and provide consistent and accurate results.

What are the types of software testing? 

  • Functional: check specific functionality of an application or software.

  • Non-functional: non-functional software tests don’t test specific functionalities but system operation, e.g., performance under heavy load or reliability of security features.

  • Structural: these are tests that check the correctness of application source code.

  • Change-related: they are performed after introducing specific changes to the source code. They are divided into:
    • Retests – tests run after a previously detected error has been removed.
    • Regression tests – check if there are no errors in other parts of the application after introducing changes.

What are the benefits of software testing? 

Although software testing is an activity that requires additional effort and knowledge of specific tools, it brings excellent effects. They should be performed because you need to make sure that the user will be able to use the functionality offered by the mobile application or web software without any problems. Besides, they check whether the system will react correctly after performing specific actions. And what will happen if the user enters incorrect data or does not enter them at all. There are a lot of scenarios that need to be checked. Software tests are also a kind of documentation because each should be described appropriately and informs what it should do and how the application should react to it. 

What is automatic software testing?

Automatic software tests of an application are based on programming and using specific scripts. Such type of software testing is much faster and more reliable than manual testing because in less time more errors can be detected. A significant advantage is also the repeatability of tests. 

The disadvantage of such testing is the risk that the UX/UI design evaluation won’t be accurate because it isn’t checked by a human but by a computer. The scripts work only as programmed, which can miss apparent errors to an experienced manual tester.   

What is Selenium and how it works?

Selenium is an open-source software test automation tool. It is used to automate web browsers. The tool has been in the market for over a decade. It helps development teams provide quality test case automation for any browser using the Selenium WebDriver library. 

To use Selenium for software test automation, you need to download the driver for the browser of your choice: GeckoDriver for Firefox, ChromeDriver for Chrome, and so on. Selenium offers QA teams and developers a programming language choice because it is compatible with the most popular languages such as Java, JavaScript, C, C#, Ruby, and Python. 

The Selenium WebDriver relies on the JSON wire protocol for test case execution, which can be completed in three simple steps:

  • Translate test commands into a URL.

  • The HTTP server sends the URLs to the installed browser drivers.

  • URLs are then forwarded to the actual browser as a request, and all test commands in the script are automatically executed.

This leading test automation solution has served as the backbone of common test frameworks such as WebDriver and Protractor, in addition to testing frameworks like Appium, which is designed for mobile apps testing. It is this element of flexibility that, over the years, has positioned Selenium as a prominent enabler for automation in-browser testing.

Advantages of using Selenium:

  • Compatibility with different operating systems such as Linux, Unix, Windows, and macOS.

  • Choice of different programming languages.

  • Compatibility with most browsers such as Firefox, Chrome, Safari, and Edge.

Disadvantages of Selenium:

  • Lack of built-in commands for automating test result generation.

  • The complexity of page-load or element load handling.

  • Inadequate support for image testing.

  • A time-consuming process for creating test scripts.

  • Complexities in setting up the test environment as compared to Cypress.

What is Cypress and how does it work?

Cypress is a JavaScript framework primarily for an end to end software testing.  

The Cypress’ idea is gathering all necessary tools like framework, assertion library, wrapper, or additional libraries into one tool.

Cypress offers a test runner (opensource) and dashboard function. The test runner allows you to view your tests’ status, preview your logs, preview your application – what is currently happening with the application, and how it behaves.

Advantages of using Cypress:

  • The snapshot functionality captures precisely what happens at the time of test execution, giving developers and QA teams a complete picture of what went down and how.

  • Elimination of commands in test scripts makes the testing process a lot faster.

  • Automatic scrolling operation gives the full view of every element before a developer or QA engineer executes a particular action.

  • Cypress has diversified itself and can now support browsers such as Firefox and Edge, in addition to Chrome. The limited browser support was considered a key drawback for Cypress, which is now on the path of course correction.

  • It can execute commands in real-time, offering visual feedback all along.

  • It documents the entire testing process in great detail.

Disadvantages of using Cypress:

  • It cannot be used to drive two browsers simultaneously.

  • Cypress lacks multiple tabs support and offers only limited support for iFrames.

  • In its current time, Cypress is not compatible with browsers such as Explorer and Safari.

  • The only JavaScript framework eliminates it as an option for developers and QAs who are not well-versed with the language.

Selenium vs Cypress: better or different software testing?

Selenium WebDriver was created to perform regression testing for web applications. This tool is widely used for front-end testing by quality control teams. The concept of self-testing code by front-end developers is relatively new. This trend was started by the emergence of agile software development methodologies, which cannot be used optimally until frontend developers have the opportunity to test their code. 

Today, front-end developers can write their test code along with integration testing and end-to-end functional testing to evaluate the functionality of their front-end projects in real browsers. 

The parameters tested by front-end developers are similar to quality control parameters if their needs and goals are different. Front-end developers don’t need a transitional environment in which the entire application is deployed. 

Cypress was created for such needs. It was built specifically to meet the software testing needs of front-end developers. It allows them to test the frontend by running it locally. This is the main difference in testing approaches that distinguishes Cypress and Selenium WebDriver. Therefore, they are different tools for different user groups. 

Supported language

Another key difference when comparing Cypress to Selenium is that automated tests in Cypress can only be written using JavaScript while Selenium is an open-source tool and is compatible with many programming languages such as Java, JavaScript, C#, Python, Ruby. 

However, we shouldn’t count this argument as a limitation to using Cypress because it is primarily intended for front-end developers. JavaScript is a widely used front-end development language worldwide so the tool can be accessible to a broad user base in the target audience. 

On the other hand, Selenium is a comprehensive regression testing tool. It has an API configured with various related languages. Its versatility makes Selenium a more suitable choice for QA teams whose work scope is broader and more diverse. 

Software testing Frameworks

Cypress is not only limited by the programming language but also by the framework we can use. It is Mocha, which is used to write tests. Its role can be compared to JUnit in Java. However, it is not the only testing framework for JavaScript programmers as there are also Jest or Tape but Cypress, unfortunately, excludes those options.

On the other hand, Selenium WebDriver does not impose such restrictions for its users. You don’t even need a test framework when automating tests with Selenium. We can run tests by writing a program that controls the browser. 

Server Mocking

Cypress is user-centric and assumes that a real back-end most of the time may be redundant for front-end developers, so Cypress can be a faster alternative compared to Selenium because it has a server mocking feature. Developers work with mock XML HTTP requests to the server to speed up the testing process.

Mocking the server responses with Selenium WebDriver is also possible but the process is more complicated. To accurately mock server responses with Selenium, a test needs to run a mock server that returns the right responses.

The built-in server mocking feature is a more comfortable and more efficient way to perform the same process. 

Browser Support

Currently, Cypress is only compatible with Chrome, Firefox, Electron, Edge, and Brave. It does not work with Internet Explorer or Safari. It also lacks multi-tab support and cannot control more than one browser at a time. 

Selenium WebDriver has no such limitations and can test applications in Chrome, Internet Explorer, Safari, and mobile browsers. 

Summary

Cypress and Selenium are designed to automate web browsers. They differ slightly in their purpose, target user base, and architecture. Also, keep in mind that Cypress is a new tool, still developing and improving while Selenium is already an established tool in the field of automated software testing. 

Which one to choose depends on specific user needs. For JavaScript developers, Cypress is a great solution. For automating code testing on different browsers, sometimes even simultaneously, Selenium is a better choice. 

Start your software development right away!

Let’s talk
Product design tools – 15 tools to facilitate collaboration

Nowadays, being Creative could be challenging but working with the right product design tools make it easier. Every day, after you got your favorite cup of coffee, for the rest of the day, you need to be a User Experience Designer, User Interface Designer, Product Designer, Workshoper, Researcher, Facilitator, and be at every meeting. It is a daily routine for you.

As a Designer, you are probably a part of each step of the product design process. If I am right, you and your team are overwhelmed by requests, asap tasks, and problems that need to be solved quickly. There is too much information around you. It would be best if you learned which are essential in product design and only information noise. Being always on the same page is difficult and time-consuming.

You work in changing environments (Agile, Kanban, SCRUM), where all diverse teams have their processes, needs, and internal languages. In most cases, you need to be a unicorn. Catch the beat, move a design from an abstract idea to a finished product. Understand different project factors. One of them is the right workflow. It can keep you on track and facilitate close collaboration with clients, businesses, and, finally, users’ needs.

product design tools 1

Sure, but is it possible? I think – “Houston, we have a problem!”.

So, what can you do? Ask the right questions.

  • How might I better organize the product design workflow and give value to the team, project, and organization by the end of the day?

  • How might I help create a winning design team workflow?

  • How might I pool my talents to develop designs that are so much more than merely pleasant to look at?

Soft skills and the transparent design process are essential factors for better product design. However, there is something more, which gives you a key for winning, especially in the newborn reality (post-Covid) – the right product design tools.

Below, there are four groups with a list of tools, which can help you in your daily work as a Designer.

product design tools 2

Tools to facilitate communication

During the day, you mainly work in the formula „together but alone”, which means that you have tasks, which are assigned to you only. It is essential to be in touch with team members and clients. When designing a product in CrustLab, the efficient flow of information is helped by product design tools:

Free tools:

Google tools
We all know Google tools such as Meet, Calendar, E-mail, and Drive. I will give you a few tips about them:

  • Don’t delete emails, especially when you have a long-term project (ex. Web Application design).

  • Only mention one thread per email.

  • Use tags and colors for better grouping.

World time buddy

Remote work means collaborating with people from all over the world, often from different time zones. With the World Time Buddy tool, you can put all of your colleagues from other time zones and see where you have overlapped, identify „together time” and „alone time”.

Free/Paid tools:

Slack
It is a communicator for daily activities with some extra features. One is quite impressive. When you have a video call on Slack and share the screen, you have the opportunity to draw on that screen. It could help you better communicate product design ideas.

product design tools 3

Tools to facilitate documentation


The possibility of creating, collecting, distributing, and communicating results as much as access to the project documentation at any moment of work is a key value for better product design.

Free/Paid tools:

Google Docs

With these cloud resources, you can get ideas to share with your colleagues easily, get feedback, and work together on it.

Here are a few tips that will help you understand that Google Docs is one of the best product design tools:

  • It is useful when you do research, and you need a place to collect notes, benchmark, interviews, and other draws, which are not official project documentation yet.

  • It is good to use comments and suggestions. People from the team will have an information background.

  • Use colors to communicate your idea clearer.

  • The voice typing feature is an incredible hack when you need to do the transcript of the interview. You can save a lot of time. It is not perfect, but still unbelievable.

Notion

It is free for personal use. When the project moves forward, and you need a workspace for the Documentation with a clear structure, the Notion is for you. You can create your company systems for knowledge management, note-taking, data management, project management, among others. The Notion’s mobile app has a great user experience, so you can always be on the page with a team.

„The pandemic has shown us that there is more to documentation than just ‘docs.’ Documentation is what enables us to get what we need.” – Rebecca Abara, Etsy – 10/14/2020 at Distributed2020.

product design tools 4

Product design tools

The heart of product design, however, lies elsewhere. It is time for product design tools that will facilitate the essence of your work. The applications described below allow you to design directly in the browser, which definitely enables group work.

Free/Paid tools:

Miro/Mural (virtual whiteboard)

They are collaborative whiteboards with digital sticky notes, where you can group them, vote for the best ones, and do all this while a timer counts down. You can use both web applications to facilitate workshops like Design Sprint, Strategy Workshop, MVP design workshops, Brainstorming with the client, or do a review with your remote team. Miro has a free plan, and Mural has a one-month free trial.

userinterviews.com

Are you designing the MVP version of the product and already have test scenarios ready but no testers? No worries, you can visit User Interviews and find the specific audience you need to test your ideas.

Figma

Figma has a free account, and it is a cloud application. What does it mean for you?

  • You can work on mac or windows.

  • You can collaborate with other designers at the same time.

  • You can invite people from outside the company, for example, from the client-side. It has significant value for you. Your partners can follow your work at any time and give you fast feedback using comments.

The cloud solution has a dark side. The application works only when you are online. Rarely but sometimes I don’t have access to my files for one or two hours. If you decide to use Figma, do backups whenever you finish your work.

Sketch

Sketch App started using primary symbols (components). It took product design to another level. You can create one item (ex. button) and use a reference for it. Why is it important? Whenever you change the primary symbol, their references change too. Developers work similarly.

Sketch App has one more value. It has an open code library. When the Designer meets the Developer, magic could happen. I will tell you a short story. In Cracow (Poland), a Front-End Developer from Brainly wanted to know how Designers work and how they use product design tools. He discovered that Sketch App has an open code library, and he can „hack” the App. He created a tool that generates the component (ex. button), which is the same in the Developers and Designers libraries. If it sounds interesting, keep reading.

html-sketchapp/React Sketch.app
One of the next steps of your product design is passing on the project to the Developers Team. Figma has a tool for that. If you use Sketch App, Zeplin is the best tool to collaborate with Developers. They will look at your project from their perspective, numbers, and CSS.

However, it is a pain point for both sides. We all are humans, and we try to understand problems and find solutions using our perspective. It is a common situation where the client accepts a designer’s project, but developers deliver something different. It is a gap, and all we know is the problem.

Software Development and Product Design Companies are trying to reduce that gap. These two tools: html-sketchapp and React Sketch.app, make it much more comfortable. Both work similarly. The developer collaborates with a designer, and he first creates a new item (ex. button). Next step, he runs one of the scripts above and generates our „button” with two of the same version:

  • One goes to the developers component library,

  • the second one (a copy) goes to the designer’s components library as a Sketch App Symbol.

Warring: These scripts work only with Sketch App (uses the open code library).

From that moment, two teams have the same elements and use them for their job, and there is no gap. It is not an easy way, but it is possible. Pixel Perfect can be great again. I recommend you checking the Brainly website and Web Application to see how html-sketchapp works in practice. Or check out alternative tools like Kactus and Abstract.

Summary: Both scripts are suitable for a more significant project. In the long-term, they could reduce cost, keep the project consistent even when the team rotates.

Tools to facilitate analysis

Qualitative, Quantitative data can help you understand, learn more about your audience, find answers to your questions, and verify the business hypothesis. Measuring your clients’ behavior enables you to uncover what is hidden behind the metrics, real problems, and needs. It is crucial for product design. There are a lot of methods and tools to do this.

In my opinion, Google Analytics is the best choice for quantitative research. For qualitative, it depends. Right questions help you take the right tools or methods.

For example, Hotjar or Cux.io show you how your audience uses your product (heatmaps, record session, stats).

What is the future like?

Newborn reality (post-Covid) speeds up the change in how we think about remote work and how we use design tools, either. In my opinion, we will work remotely more in the future. What does it mean? There will be more and more product design tools on the market. Right now, it is more than we need. See the list of The 2020 UX Research Tools Map.

Remember, the right tools give you:

  • More efficient work,

  • the simplified connection between teams,

  • improved products quality,

  • shorter working time.

Before you pick one of them, make sure that it will add value not only for you but also for your team, organization, or clients. Product design is a team game.

Start your software development right away!

Let’s talk