TestJS Summit - January, 2021

Browser automation has evolved over the years, starting with Selenium and WebDriver. Tools like Cypress, Taskerfee, Puppeteer, and Playwise use different approaches for automation. The new WebDriver protocol will enable sending and receiving thousands of commands and messages simultaneously. New testing types, such as performance and accessibility testing, will continue to emerge. The new WebDriver protocol combines the best of all three approaches and provides opportunities for testing and automating web applications.

This Talk discusses the importance of software testing and engineering through the example of the Muslim storm surge barrier in the Netherlands. It emphasizes the need for iteration, reflection, and making trade-offs in building great products. Testing assumptions and writing good tests are crucial for delivering value and building confidence in code. The Talk also explores the balance between test coverage and confidence, and how to foster a developer culture that values testing and collaboration.

Today's talk is about the importance of visual testing in software development. Visual bugs can easily be missed when relying solely on automated tests. These bugs can have a significant impact on user experience and can even cost businesses customers. Applitools offers a machine learning approach to highlight relevant differences in visual testing. Their eyes API and Cypress integration make it easy to add visual testing to existing tests. With Applitools' ultra-fast grid, visual testing can be done across multiple platforms and devices simultaneously.

Concept.js is a BDD style testing framework focused on browser testing, offering easy switching between engines and Cucumber BDD support. The Pulse feature in Concept.js allows for interactive test execution and editing. Concept.js provides a user-friendly interface, reporting options, and supports parallel execution. CodeSap.js offers strategies for dealing with slow-loading elements and provides flexibility in browser control. Contributing to Concept.js is encouraged, and CodeSap.js is a good choice for advanced features and full browser control.

Today's Talk highlights the importance of software quality and its impact on businesses. It emphasizes the use of different tools and practices to improve software quality. The Talk covers topics such as testing with TypeScript and React Testing Library, accessibility, Cypress for end-to-end testing, writing better queries, monitoring performance, using feature flags with LaunchDarkly, and the value of Prettier. The key takeaway is that developing high-quality software with fast feedback loops and simplicity is crucial for success.

The panel discussion on application security testing covered various perspectives on DevSecOps, emphasizing the importance of shifting security left and the role of automation. Collaboration between developers and security teams was highlighted, as well as the need for developer-friendly security tooling. Pain points in integrating security testing early in the pipeline were discussed, including technical and cultural challenges. Open source project recommendations for building a secure pipeline were also provided.

Stackhawk is an application security tool that focuses on dynamic application and API security testing. It is built on top of the open source ZAP project and designed for automation in CICD. Stackhawk provides a comprehensive set of tools for application security testing and bug fixing, including viewing findings, recreating requests, and easily fixing vulnerabilities. It allows for triaging findings and integrating with other engineering stacks. Visit stackhawk.com to sign up for a free account and learn more at docs.stackhawk.com.

Tech debt is a common issue that teams struggle with, but addressing it effectively requires a structured approach and prioritizing issues that primarily impact developers. Feature preservation, such as automated testing and monitoring, should be considered part of building features, not tech debt. Fixing user-related issues takes priority over developer concerns, and scaling to serve more users benefits both users and developers. Climbing out of tech debt effectively is possible with a focus on developer productivity and user benefit.

The Talk discusses testing hooks in a React application. The speaker starts by showing an untested React application and begins testing with a simple placeholder test. The importance of refactoring and testing custom hooks is emphasized, with the recommendation to use the React hooks library and achieve full test coverage. Unit testing React components may not be valuable, as the complexity lies in the hook code. Instead, end-to-end testing with tools like Cypress is recommended.

This Talk discusses runtime performance in software development. It explores the concept of garbage collection and the importance of optimizing functions for faster execution. The event loop and profiling are also highlighted as essential tools for analyzing and improving runtime performance. Real-life examples demonstrate the benefits of profiling in optimizing functions and improving app performance. Overall, the Talk emphasizes the significance of understanding and optimizing runtime performance in software development.

The Talk discusses the cost and issues with end-to-end integration tests and the benefits of using contract testing with PACT. It explores the challenges of scaling teams and components and highlights the advantages of using PACT for testing microservices. The PACT framework is demonstrated, showcasing its ability to provide fast and reliable feedback, independent testing, and versioned contracts. The Talk also covers topics such as testing compatibility, safe removal of fields, and integrating PACT with Cypress.

The Talk discusses common mistakes in Cypress tests, such as accessing the file system directly instead of using the Cypress command, and the importance of writing effective Cypress tests for different scenarios. It also emphasizes the need for adding assertions during navigation and alternating commands and assertions. The Talk highlights the significance of documentation and examples in providing support and addresses the advantages of using the Cypress Node test runner. It concludes with tips on debugging, data tests, and testing user journeys and edge cases.

Arjun introduces Playwright, a library for cross-browser end-to-end testing of web applications. The challenges in modern web testing include the evolving web platform and reactive frameworks. Playwright provides capable, reliable, and fast automation, with the ability to capture events and enhance test reliability. It uses browser contexts for faster execution and supports multiple languages and frameworks. Playwright is used by companies like VS Code, Bing, Adobe, and material UI, and offers cross-browser support and an improving roadmap.

Detox is a grey box testing solution for mobile applications that manages sync between test code and the app, eliminating the need for manual synchronization. It follows the grey box testing approach used by Espresso and Earl Grey. Wix's mobile app architecture consists of four types of parts, each with its own independent CI process. Test isolation and input consistency are important for stable end-to-end testing. Android emulators perform better on Mac VMs with nested virtualization, but our next-gen setup includes Bare Metal Mac minis for improved performance. Detox is primarily used for React Native applications and has limitations, but there are learning resources available. Detox supports camera functionality and provides solutions for debugging test fails and running tests on device farms. Currently, Detox supports simulators for iOS and devices connected to the computer for Android, with work underway to support real devices. The test APK for Detox connects to the production app and Node service, and Expo is responsible for providing a test APK for Android.

This Talk discusses automation testing tools and strategies for accessibility. It highlights EmberJS's approach to accessibility and the efforts of the developer community. The importance of prioritizing accessibility and using tools like Ember A11y testing and Axe-Core is emphasized. Integration with React, Vue, and other frameworks is made easy with NPM packages. The Talk also emphasizes the value of manual testing and user evaluation alongside automation testing.

This Talk provides an introduction to the core of Vitals and its contribution to Google search. It discusses the evolution of website performance metrics and the need to consider factors beyond the time to first byte. The concept of Core Web Vitals is introduced, consisting of three metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. The upcoming Page Experience signal, launching in May 2021, will combine Core Web Vitals with existing ranking signals. The Talk also addresses challenges in measuring performance and provides insights on layout stability and visual completeness.

Today's Talk discusses API mocking and its role in testing. The speaker explores the advantages and disadvantages of server and client-side mocking, and introduces the use of service workers for mocking. The MockServiceWorker library (MSW) is presented as a solution that leverages service workers to intercept requests and provide mock responses. MSW is client-agnostic, widely used, and offers many features. The speaker also mentions upcoming improvements and encourages users to try MSW and provide feedback.

The scariest thing about serverless is the fear of vendor lock-in and losing control. Planning, good architecture, and deployment procedures help keep switching costs reasonable. Hexagonal architecture is a useful approach for writing testable serverless apps. Integration testing is crucial for serverless apps, and hexagonal architecture helps fight vendor lock-in and reduce switching costs. Docker is used for testing serverless functions, and the practicality of hexagonal architecture remains a question.

The speaker switched from Enzyme to the REACT Testing Library due to its encouragement of best practices, easier refactoring, and promotion of accessible code. The shift from class-based components to functional components in React is also highlighted. The benefits of the Testing Library include improved readability and user interaction simulation through DOM assertions, as well as its opinionated nature and focus on accessible code.

Today's Talk focuses on preventing test warnings in software development. Test warnings are often ignored and can lead to bugs, performance issues, and security concerns. The speaker introduces a library called jsreporter log validator that automates the process of adding rules to prevent new warnings and fixing existing ones. The library provides a summary of expected behavior, failures, and actions to take. Overall, the Talk emphasizes the importance of paying attention to test warnings and using automation to improve developer experience and prevent issues in large and legacy applications.

Today's Talk discusses the value and challenges of visual regression in UI testing. It highlights the importance of predictability in loading pages and choosing the right screenshot resolution. It also mentions the use of Visual Regression Services, Docker, and the Odiff library as solutions to improve stability and efficiency in visual regression testing.