Model Based E2E Testing with State Machines

with Playwright and @xstate/test

Posted in Coding, Testing, XState, React, Talks
June 5, 2023 - 4 min read
Photo by José Manuel Lucas
Photo by José Manuel Lucas

This was my third time on the Canary Islands, second time on the island of Tenerife. I really love the 17º – 24º C (63º – 75º F) weather every day of the year is pretty amazing. If the terrain weren't so taxing – sooo hilly!! – I might consider moving there. I had been winking at JS Day Canarias over Twitter ("twinking"?) for several years, and I finally got to meet the organizers at React Alicante last year, so I was delighted to be invited this year.

Ever since I saw David K. 🎹's talk from React Rally 2019, I've been curious about model-based testing. As he is want to do, his demo was a little, let's say, "set in the future", so it took a few years for Reality to catch up, but last year at the first ever Remix Conf, I learned more about Stately's @xstate/test from Matt Pocock, who was working on the alpha docs at the time.

This was the first year where I submitted talks before actually having any content behind the proposals, so when I had two different talks accepted back-to-back in the same week of May, it was a little stressful. By March, I had actually built the project that confirmed that @xstate/test was a way to build tests. My friendship from Croatia the previous year with Debbie O'Brien made Playwright the obvious choice for my demo.




The day before the conference began, I went on a little excursion with my friends from Lemon Code to experience the most authentic food on the islands, namely those provided by a guachinche. Five of us piled into a small rental car, and we did a bit of tourism on our way to the guachinche, including stopping at a town where I had been before when I traveled to the island for the first time with my family two years earlier. We ended up at Guachinche Los Gomez. There was no menu to order from. The sexagenarian waiter came to our table and read out a list of things they had, including such Canary staples as ropa vieja and queso asado. We said, "Yeah, some of all that." Then we began to order the main course, one person asking for the solomillo, but the waiter stopped us, warning that it might be too much food and we should wait to order additional dishes until we'd had our appetizers. We acquiesed.

Ropa Vieja and Queso Asado_Ropa Vieja_ and _Queso Asado_

Afterwards, we actually did want to try the meat, so we ordered one solomillo. In Spanish, the word "solomillo" is used for both beef sirloin steak and pork tenderloin, the beef usually being way more expensive. This meat was so tasty and juicy, we were genuinely unclear as to whether we were eating beef or pork. We confirmed with the waiter that it was pork, and someone at the table exclaimed, "¡_Menudo cerdo, tío!" ("Man, what a pig!")

Pork Tenderloin_Solomillo de Cerdo_ (Pork Tenderloin)

Rather than present us with a dessert menu, the waiter just brought us three of their homemade desserts.

When we couldn't eat or drink any more (we'd had 6 liters of local red wine), we went to pay. There had never been any mention of prices, of course (no menus 🙄). When the waiter told us 66€, our reaction was, "That's actually not a bad price for what we ate!", assuming it was 66€ each. I mean, just the wine should cost that much! But when he clarified that it was 66€ in total, we were astonished!

I've placed a digital pin on the map, so I can find that place every time I go back to Tenerife. Wow!

Discuss on Twitter

© 2023 Erik Rasmussen