Testautomatisering is cruciaal om de kwaliteit en betrouwbaarheid van applicaties te waarborgen. Het combineren van Serenity/JS, Cucumber en Playwright biedt een krachtig testframework dat ontwikkelaars en testers in staat stelt om schone, expressieve BDD-stijl tests te schrijven terwijl ze de robuuste browserautomatiseringsmogelijkheden van Playwright benutten. Wanneer geïntegreerd met JIRA, kunt u problemen efficiënt beheren en volgen, zodat eventuele bugs die tijdens het testen worden ontdekt, direct worden geregistreerd en actie kunnen worden ondernomen.

In deze post zullen we een eenvoudig voorbeeld doorlopen van het integreren van JIRA met Cucumber, Serenity/JS en Playwright voor effectief testcasemanagement.

Vereisten

Om mee te volgen, heb je het volgende nodig:

• Node.js geïnstalleerd op je machine
• Cucumber, Serenity/JS en Playwright ingesteld in je project
• Een JIRA account en API-toegangstoken om programmatisch met JIRA te kunnen communiceren
• Een JIRA Project om je problemen te beheren

Stap 1: Stel Serenity/JS, Cucumber en Playwright in

Als je dat nog niet hebt gedaan, kun je Cucumber, Serenity/JS en Playwright als afhankelijkheden installeren:```bash npm install –save @serenity-js/core @serenity-js/assertions @serenity-js/web @cucumber/cucumber @playwright/test

- **Node.js** geïnstalleerd op je machine
- **Cucumber**, **Serenity/JS**, en **Playwright** ingesteld in je project
- Een **JIRA** account en API toegangstoken om programmatisch met JIRA te communiceren
- Een **JIRA Project** om je issues te beheren

## Stap 1: Stel Serenity/JS, Cucumber, en Playwright in

Als je dat nog niet gedaan hebt, kun je **Cucumber**, **Serenity/JS**, en **Playwright** als afhankelijkheden installeren:```bash
npm install --save @serenity-js/core @serenity-js/assertions @serenity-js/web @cucumber/cucumber @playwright/test
```Vertaal de volgende tekst naar het Nederlands:

als je de installatie wilt overslaan, heb ik ook een voorbeeld github-omgeving die je kunt klonen, specifiek voor deze jira-integratieoefening. Deze github is een kloon van de originele github die door het senenity-team zelf is geleverd. [Cucumber JIRA Integratie GitHub Repository](https://github.com/learn-automated-testing/cucumberjiraintegration).

Voor meer details en de volledige codebase, kun je de [Cucumber playwright serenity-js GitHub Repository](https://github.com/serenity-js/serenity-js-cucumber-playwright-template) bekijken.

Met deze opzet kun je beginnen met het maken van je teststappen in Cucumber met behulp van **Serenity/JS** en **Playwright** voor soepele, krachtige beweringen en browserinteracties.

## Stap 2: Definieer een Cucumber Stap met een JIRA Issue Rapport

Laten we eens kijken naar een voorbeeld waarbij we selectievakjes op een webpagina testen en een JIRA-probleem willen loggen als een van de tests mislukt. Hier is een uitleg van hoe dit kan worden bereikt.

### Stap 1: Definieer locators voor je elementen

Je wilt specifieke elementen op de pagina selecteren voor het testen. In dit voorbeeld lokaliseren we twee selectievakjes met behulp van Playwright:```typescript
import { PageElement, By } from '@serenity-js/web';

const FirstCheckbox = PageElement.located(By.css('[for="checkbox1"]')).describedAs('first checkbox');
const SmileyIconForFirst = PageElement.located(By.css('label[for="checkbox1"] .icon')).describedAs('smiley icon for first checkbox');
```### Stap 2: Schrijf teststappen om met deze elementen te interageren

Met behulp van beweringen kunt u gedrag valideren. Hieronder proberen we het selectievakje te selecteren en te verifiëren of het het verwachte pictogram weergeeft. Als de test mislukt, loggen we het probleem in JIRA.

Hier is een voorbeeld van een stapdefinitiebestand`jira.steps.ts`Sure, I can help with that. But you didn't provide any text to translate. Could you please provide the text you want translated to Dutch?```typescript
import { Given, When, Then } from '@cucumber/cucumber';
import { Actor } from '@serenity-js/core';
import { Navigate, PageElement, Click, isSelected, isVisible, Text } from '@serenity-js/web';
import { Ensure, equals } from '@serenity-js/assertions';
import { By } from '@serenity-js/web';
import { createJiraIssue } from '../../test/interactions/ReportToJira';
import { Browser, chromium } from '@playwright/test';

const FirstCheckbox = PageElement.located(By.css('[for="checkbox1"]')).describedAs('first checkbox');
const SecondCheckbox = PageElement.located(By.css('[for="checkbox2"]')).describedAs('second checkbox');
const SmileyIconForFirst = PageElement.located(By.css('label[for="checkbox1"] .icon')).describedAs('smiley icon for first checkbox');
const SmileyIconForSecond = PageElement.located(By.css('label[for="checkbox2"] .icon')).describedAs('smiley icon for second checkbox');

// Step to navigate to the Checkboxes page
Given('{actor} navigates to the Checkboxes page', async (actor: Actor) =>
    actor.attemptsTo(
        Navigate.to('https://practiceautomatedtesting.com/webelements/Checkboxes')
    )
);

// Step to check the first checkbox, ensuring visibility with Ensure
When('{pronoun} checks the first checkbox', async (actor: Actor) =>
    actor.attemptsTo(
        Ensure.that(FirstCheckbox, isVisible()),  // Ensure the checkbox is visible
        Click.on(FirstCheckbox)                   // Click the checkbox once visible
    )
);

// Step to verify that the first checkbox is checked and displays a smiley face
Then('{pronoun} should see that the first checkbox is checked with a smiley icon', async (actor: Actor) => {
    const featureFileName = 'Checkbox.feature';  // Feature file name for reference
    const gwtSteps = \`
      Given the user navigates to the Checkboxes page
      When the user checks the first checkbox
      Then the user should see that the first checkbox is checked with a smiley icon
    \`;
    
    try {
        await actor.attemptsTo(
            Ensure.that(FirstCheckbox, isSelected()),               // Ensure the first checkbox is selected
            Ensure.that(Text.of(SmileyIconForFirst), equals('😊'))  // Ensure the smiley icon shows a happy face
        );
    } catch (error) {
        console.error('Test failed:', error.message);
        await createJiraIssue(error.message, featureFileName, gwtSteps);  // Pass the error message, feature file name, and GWT steps
    }
});
```## Integreren met JIRA voor probleemopvolging

Om automatisch een JIRA-probleem aan te maken wanneer een test mislukt, kunnen we een interactie toevoegen in`ReportToJira.ts`dat stuurt een`PostRequest`naar JIRA's REST API. Hier is hoe:```typescript
import { actorCalled } from '@serenity-js/core';
import { CallAnApi, LastResponse, PostRequest, Send } from '@serenity-js/rest';
import { Ensure, equals } from '@serenity-js/assertions';

export async function createJiraIssue(errorDescription: string, featureFileName: string, gwtSteps: string) {
    const JIRA_BASE_URL = 'https://learnautomatedtesting.atlassian.net';
    const PROJECT_KEY = 'XSP';
    const ISSUE_TYPE = 'Bug';
    const JIRA_USERNAME = process.env.JIRA_USERNAME || 'your username'; //(is your email)
    const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN || 'your api key';

    await actorCalled('JiraReporter')
        .whoCan(CallAnApi.at(JIRA_BASE_URL))
        .attemptsTo(
            Send.a(PostRequest.to('/rest/api/3/issue').with({
                fields: {
                    project: {
                        key: PROJECT_KEY,
                    },
                    summary: `Automated Test Failure in Feature: ${featureFileName} - Unable to Login`,
                    description: {
                        type: 'doc',
                        version: 1,
                        content: [
                            {
                                type: 'paragraph',
                                content: [
                                    {
                                        type: 'text',
                                        text: `The following feature file failed: Steps:

${gwtSteps}`
                                    }
                                ]
                            },
                            {
                                type: 'paragraph',
                                content: [
                                    {
                                        type: 'text',
                                        text: `The test failed with the following error:

${errorDescription}`
                                    }
                                ]
                            }
                        ]
                    },
                    issuetype: {
                        name: ISSUE_TYPE,
                    },
                },
            }).using({
                headers: {
                    'Authorization': `Basic ${Buffer.from(`${JIRA_USERNAME}:${JIRA_API_TOKEN}`).toString('base64')}`,
                    'Content-Type': 'application/json',
                }
            })),
            Ensure.that(LastResponse.status(), equals(201))
        );
}
```Met deze opstelling kunt u **Playwright** gebruiken voor browserinteracties, **Serenity/JS** voor BDD-stijl testen, en **JIRA** voor automatische probleemtracking. Deze combinatie biedt een robuuste oplossing voor het behouden van testdekking en het effectief aanpakken van bugs.

## Belangrijke Opmerking over het Creëren van Defecten in het Echte Leven

In echte applicaties maak je meestal geen JIRA-defecten automatisch aan voor elke testfout in automatisering. Deze aanpak kan leiden tot een overbelasting van problemen in JIRA. In plaats daarvan wordt aanbevolen om eerst de testresultaten te bekijken en vervolgens selectief defecten aan te maken voor specifieke fouten indien nodig. Dit kan worden beheerd door het implementeren van een boolean vlag om de creatie van defecten te controleren, waardoor je tests opnieuw kunt uitvoeren voor welke defecten moeten worden gelogd.

Voor meer details en de volledige codebase, kunt u de [Cucumber JIRA Integration GitHub Repository](https://github.com/learn-automated-testing/cucumberjiraintegration) bekijken.