Mark Noonan
Cypress
Atlanta, Georgia, United States
Actions
Mark is a developer-turned-product manager focused on Cypress Accessibility at Cypress.io. His background before Cypress is in front-end development in agency and enterprise contexts, and before that he spent many years in developmental disability support at the Atlanta nonprofit, People Making Progress.
Links
Awards
Area of Expertise
Topics
Automated Accessibility Testing in the Cloud
Like other aspects of quality, success with accessibility requires a multi-layered approach including automation and manual validation. In this talk we'll look at the automation layer of accessibility testing, and discuss the strengths and weaknesses of common approaches. We'll learn how this layer fits into an overall accessibility strategy to meet your overall goal: building and maintaining software that works for people with disabilities.
We'll also talk about how we are tackling this at Cypress, where we generate highly detailed accessibility reports based on existing test flows in Cypress Cloud, and what I've learned from talking to dozens of companies about how they manage accessibility.
End-to-End and Component Testing with Cypress
In this workshop you will get hands-on experience writing component tests and end-to-end tests in the browser with Cypress. We'll explain what Cypress is doing as it executes your tests, and cover many Cypress basics like commands, assertions, time-travel debugging, and network stubbing.
We'll also talk about decision making in testing, how to avoid testing too much or too little in complex, component-driven frameworks. When end-to-end and component tests are running in the same browser, using the same commands, we have some new options for code sharing and test organization.
Most of all, this workshop teaches testing in a way that is formed around a practical front-end development workflow. We will start from a design and requirements for a small widget we have to build, go to a set of well tested components that meet the requirements, and place the widget in a full page content for end-to-end testing.
UI Component Tests and Testing Strategy
Writing UI component tests that run in your browser right alongside the development environment is a powerful workflow for test-driven development on the front end. In this talk, we will discuss how Component Testing in Cypress lets developers take a component-first, test-driven approach to developing components. This approach can streamline our end-to-end tests by shifting coverage of certain details (like accessibility and correctness of the DOM) to the left of the development process.
The talk will cover some “dos” and “don’ts” for component tests, and compare component testing to end-to-end testing, then talk about how both work together as part of an effective testing strategy for web applications, and some new opportunities for code sharing between testing types that might be worth exploring.
What is a Vue Component?
Pretty much anything smaller than a whole application can be considered a "component", but when we want to talk about them with other people, it can help to be more specific.
In this talk let's use examples and try to separate out (and name) different kinds of components based on their role in an application in the designs we are building with Vue. We'll start with a basic component and work our way up, taking some time along the way to talk about props, slots, and the component lifecycle.
Spotting patterns in how we use components can help us understand our front-end architecture and testing needs, find some language that we can use when talking with designers and other stakeholders about "components" as they see them, and be more clear when communicating with other developers in our own team about the actual Vue components that implement a given design.
Researching and Writing Accessible JavaScript Thingies
You know it when you see it. It's an interactive part of a design comp. It animates on hover. Or scroll. Or maybe, when you select it, some other thing changes. It's not a dropdown or an accordion, it's a thingy.
This talk will explore ways of mapping creative interactive designs to standard accessible usability patterns so that we can meet the expectations of all our users when implementing innovative designs. It starts with understanding the nature of the content being displayed, and the nature of the interaction going on, ignoring the visuals.
Armed with this knowledge, we can find the right HTML and JS to represent this interaction in a usable way. We'll talk about resources that help make this kind of thinking second nature, and how to avoid reinventing the wheel when things look new, if they really just represent one of many existing patterns.
How to Test Components in the Browser with Cypress
Cypress Component Testing provides a real browser environment for building and testing isolated components in the browser. This means all of the Cypress tooling for writing and debugging end-to-end tests can now be used for components.
This talk will show you how to set up component testing and test some common scenario. Multiple frameworks and bundlers are supported in Cypress, but the core principles of how testing works are the same in all of them, so this content should be applicable whether you use React, Vue, Angular, Svelte or something else entirely.
We'll use examples to talk about common test situations and some early gotchas you might experience when getting started.
Accessibility Can Streamline Your Front End Process
Starting with accessibility when building user interfaces can simplify your decision making, and streamline your overall front-end development process. We'll look at how to recognize good and bad practices for accessibility with examples in HTML, CSS, and JavaScript. Then we'll see how those practices relate to a more robust, maintainable, and testable end result for your team over the long term. Finally we'll take a quick tour of some resources you can use to start focusing on accessibility in your own work.
The Testing Sea Monster - a whale of a tale about front-end testing
Mental models like the testing pyramid and testing trophy provide good high level ideas about different categories of automated testing - unit, integration, end-to-end. They help us understand the tradeoffs between them and the value of each.
In real life, sometimes testing feels a lot less organized than that. Instead of a pyramid, it's more like sea monster, trying to pull our ship down with its many weird tentacles. Not only that, it's doing this when we are focused on getting our ship from A to B. We don't want to be fighting off this sea monster, we want to be delivering quality software. We only want to think about testing in the context of how it helps us deliver quality software quickly, and with confidence.
In this talk we'll focus on front-end testing and a decision framework to help us "test what matters, where it matters" and outsmart the sea monster. We will use Cypress to show examples of end-to-end, component, unit, and API level tests and see how they work together.
MagnoliaJS 2023 Sessionize Event
KCDC 2023 Sessionize Event
Scenic City Summit 2023 Sessionize Event
Vueconf.US 2023 Sessionize Event
Stir Trek 2023 Sessionize Event
CodeMash 2023 Sessionize Event
Connect.Tech 2022 Sessionize Event
Test Automation & Digital QA Summit
UI Component Test and Testing Strategy
Atlanta Developers' Conference 2022 Sessionize Event
Atlanta Code Camp 2021 Sessionize Event
KCDC 2021 Sessionize Event
Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.
Jump to top