Penpot

Uitdaging

Penpot wendde zich tot QAwerk om ervoor te zorgen dat ze hun product binnen het gestelde tijdsbestek aan het grote publiek konden lanceren. Ze wilden dat hun interne team zich volledig zou richten op het ontwikkelen van waardetoevoegende functies en het polijsten van de productfunctionaliteit, in plaats van zich zorgen te maken over bugs en hoe deze te vangen. 

Hier is een kort overzicht van wat we moesten leveren:

• Ontwikkel teststrategie & plan. Voordat ze met QAwerk samenwerkten, rapporteerden het Penpot-team bugs met hulp van interne teamleden en hun grote gemeenschap van bètaversiegebruikers. Met de groeiende populariteit van Penpot en de intentie om het bètastempel van hun app te verwijderen, was deze aanpak niet langer duurzaam. Daarom werd ons gevraagd het gehele testtraject te plannen en de juiste QA-workflows op te zetten om de basis te leggen voor toekomstige professionele tests.
• Van bèta naar officiële release. Het elimineren van bugs en het verbeteren van de prestaties voordat het product commercieel gereed aan het publiek werd vrijgegeven, was van het grootste belang voor Penpot. Onze taak was hier om methodisch alle bestaande functionaliteit te doorlopen en zoveel mogelijk problemen te vinden om ervoor te zorgen dat er geen kritieke bugs meer in de productie zaten en dat de app zonder vertragingen of problemen met gegevensopslag werkte. 
• Nieuwe functionaliteit polijsten. De productie-release omvatte enkele langverwachte ‘killer features’, zoals flexibele interfaces, directe toegang tot code vanuit de werkruimte en verbeteringen aan de toegankelijkheid, naast andere dingen. Onze taak was ervoor te zorgen dat deze upgrades naadloos werden geïntegreerd, geen verstoringen veroorzaakten voor de bestaande functionaliteit en gebruikers oprecht enthousiast maakten over het gebruik van Penpot.

Bovendien wilden we Penpot helpen betere dekking te bereiken en updates met een gerust hart uit te brengen. Daarom boden we aan om handmatige tests aan te vullen met testautomatisering.

Oplossing

Toen we net begonnen met testen, stuitten we op een groot aantal interne serverfouten die vrij willekeurig verschenen, en het was aanvankelijk niet duidelijk wat dit gedrag veroorzaakte. Deze bugs moesten onmiddellijk worden opgelost, omdat gebruikers die ermee te maken kregen hun werk konden verliezen.

Dus namen we video’s op om de exacte stappen vast te leggen om dit type bug te reproduceren, in een poging een gemeenschappelijk patroon tussen dergelijke gebeurtenissen te vinden en te achterhalen welke gebruikersacties de fouten hadden kunnen veroorzaken en welke app-gebieden er het meest gevoelig voor zijn. We deelden onze bevindingen met de ontwikkelaars van Penpot, en uiteindelijk hebben zij dit probleem volledig uitgeroeid.

Onze testinspanningen omvatten verschillende soorten testen, zoals:

• Functioneel Testen. We controleerden of de gebruikersautorisatie soepel verliep. We hebben de modules voor gebruikersprofielen, dashboards en werkruimten grondig getest. We zorgden ervoor dat alle wijzigingen zonder vertragingen werden toegepast op het ontwerp, vooral tijdens collaboratieve bewerking.
• Regressietesten. Het Penpot-team brengt continu nieuwe functies en upgrades van bestaande functies uit, wat regelmatige regressietesten noodzakelijk maakt. We combineren zowel handmatige als geautomatiseerde regressietesten om de beste dekking en consistente resultaten te bereiken.
• UI Testen. Het strakke visuele uiterlijk van de gebruikersinterface is van het grootste belang voor elke moderne app, vooral voor een ontwerptool zoals Penpot die wordt gebruikt door UI/UX- en productprofessionals bij grote bedrijven. We hebben de positionering en uitlijning van elementen op elke interface gecontroleerd en ervoor gezorgd dat UI-patronen consistent waren in de hele app.
• Compatibiliteitstesten. Onze QA-ingenieurs hebben Penpot getest in drie grote browsers: Firefox, Chrome en Safari. We hebben Penpot getest in verschillende Safari-versies, aangezien sommige bugs alleen in oudere versies verschenen. We hebben ook drie verschillende besturingssystemen gebruikt: Windows, macOS en Linux, om ervoor te zorgen dat alle gebruikers kunnen profiteren van Penpot, ongeacht hun apparaten.

Wat betreft testautomatisering, hebben we ons voornamelijk gericht op regressietestgevallen.

Testautomatisering

Testautomatisering werd uitgevoerd met behulp van het Playwright-framework. Playwright is ontworpen om browser- en platformonafhankelijke automatisering te vereenvoudigen, dus het past goed bij onze behoeften. 

Bij het selecteren van testgevallen voor automatisering volgden we twee regels: testgevallen moeten een hoge impact hebben en hun voorbereiding mag niet te veel tijd in beslag nemen. Zo kunt u een positieve ROI zien.

We automatiseerden bijvoorbeeld geen gevallen zoals aanmelden of wachtwoord vergeten, omdat je hier te maken hebt met externe API’s zoals Gmail, en het automatiseren van deze workflow is de moeite niet waard. Of gevallen met slepen en neerzetten of kopiëren en plakken, omdat deze niet altijd correct worden afgehandeld door Playwright en tests instabiel kunnen zijn. 

We automatiseerden testgevallen zoals inloggen, bestanden maken en verwijderen, bestanden openen en hernoemen, borden maken en verwijderen, vervaging aan borden toevoegen, achtergrondkleur wijzigen, en nog veel meer. Ze zijn beschikbaar in de publieke repository van Penpot. 

We hebben ook de visuele vergelijkingen van Playwright benut voor snapshot-tests. Om het aantal mislukte tests vanwege UI-wijzigingen te minimaliseren, gebruikten we schermafbeeldingen die slechts een enkel element of een gedeelte vastlegden, zoals een gemaakt vorm. Zo beïnvloedden nieuwe secties die aan het ontwerpvenster werden toegevoegd, de teststabiliteit niet.

Ongeveer 10% van onze testgevallen vereist het vastleggen van het hele scherm, bijvoorbeeld wanneer we niet alleen de lagen, maar ook de werkbalk moeten controleren. Hier gebruikten we maskering om elementen met dynamische inhoud, zoals tijdstempels of gebruikersnamen, te negeren. Hoewel het onmogelijk is om ‘false positives’ volledig te elimineren, is het bijwerken van dergelijke testgevallen eenvoudig en snel.