Cucumber ve Playwright Testlerini GitHub Actions’ta event trigger ile tag seçerek istediğimiz testleri koşturma

Yazılım projelerinde test süreçlerini otomatize etmek, yazılım kalitesini artırmanın en etkili yollarından biridir. Özellikle Playwright ve Cucumber gibi güçlü test framework’lerini GitHub Actions ile entegre ederek, testlerinizi belirli olaylara (event trigger) bağlı olarak çalıştırmak mümkün hale gelir. Bu yazıda, test senaryolarını etiket (tag) bazlı tetikleyerek nasıl daha esnek ve yönetilebilir hale getirebileceğimizi adım adım ele alacağız.

GitHub Actions’daki workflow_dispatch, bir workflow'un manuel olarak tetiklenebilmesini sağlar. Yani GitHub arayüzünden bir düğmeye basarak testleri veya diğer işlemleri başlatabilirsiniz.

workflow_dispatch Nedir?

workflow_dispatch, GitHub Actions içinde elle (manuel) çalıştırma özelliğini etkinleştiren bir trigger (tetikleyici) türüdür.

.yaml dosyanıza eklenmesi gereken komutlar

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:
    inputs:
      test_tags:
        description: 'Which tags to run? (e.g. @apiLogin or @login and not @regression)'
        required: false
        default: '@login'

    - name: Run Cucumber + Playwright Tests with Tag Filter
      run: |
        TAGS="${{ github.event.inputs.test_tags }}"
        if [ -z "$TAGS" ]; then
          echo "No tags provided, running all tests"
          npx cucumber-js --format html:cucumber-report.html
        else
          echo "Running tests with tags: $TAGS"
          npx cucumber-js --tags "$TAGS" --format html:cucumber-report.html
        fi

.yaml dosyamızın tam hali

name: Run Tagged Cucumber + Playwright Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:
    inputs:
      test_tags:
        description: 'Which tags to run? (e.g. @apiLogin or @login and not @regression)'
        required: false
        default: '@login'

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18

    - name: Install dependencies
      run: npm install

    - name: Install Playwright Browsers
      run: npx playwright install --with-deps

    - name: Run Cucumber + Playwright Tests with Tag Filter
      run: |
        TAGS="${{ github.event.inputs.test_tags }}"
        if [ -z "$TAGS" ]; then
          echo "No tags provided, running all tests"
          npx cucumber-js --format html:cucumber-report.html
        else
          echo "Running tests with tags: $TAGS"
          npx cucumber-js --tags "$TAGS" --format html:cucumber-report.html
        fi

    - name: Upload Cucumber Report
      if: always()
      uses: actions/upload-artifact@v4
      with:
        name: cucumber-report
        path: cucumber-report.html

Cucumber + Playwright ile örnek test case ve senaryo

login.step.js

const { When, Then, Given, After, Before } = require('@cucumber/cucumber');
const { chromium } = require('playwright');
const assert = require('assert');
const { selectors } = require('../fixtures/saucedemoSelectors.js');

let browser;
let page;

Given('Ana sayfaya gidiyorum', async () => {
    browser = await chromium.launch({ headless: true });
    page = await browser.newPage();
    await page.goto(selectors.SaucedemoUrl);
});

// Giriş Yapma
When('Geçerli kullanıcı adı ve şifre ile giriş yapıyorum', async () => {
    await page.fill(selectors.usernameselector, selectors.username);
    await page.fill(selectors.passwordselector, selectors.password);
    await page.click(selectors.loginButton);
});

// Envanter Sayfası Doğrulama
Then('Envanter sayfasına yönlendirildiğimi doğrula', async () => {
    await page.waitForSelector(selectors.inventorylist);
    const inventoryListElement = await page.$(selectors.inventorylist);
    const isVisible = await inventoryListElement.isVisible();
    assert.strictEqual(isVisible, true, 'Envanter listesi elementi görünür değil');
});

// Çıkış Yapma
When('Hesabımdan çıkış yapıyorum', async () => {

    await page.evaluate(() => {
        document.querySelector('#react-burger-menu-btn').click();
    });

    await page.waitForTimeout(1000);

    await page.evaluate(() => {
        document.querySelector('#logout_sidebar_link').click();
    });

});

// Giriş Sayfası Doğrulama
Then('Giriş sayfasına yönlendirildiğimi doğrula', async () => {
    await page.waitForSelector(selectors.loginwrapper);
    const loginElement = await page.$(selectors.loginwrapper);
    const isVisible = await loginElement.isVisible();
    assert.strictEqual(isVisible, true, 'Giriş formu elementi görünür değil');
});

// Unsuccessful login and error message verification 
// ( Given - Ana sayfaya gidiyorum adımını tekrar burada yazmamız gerekmiyor / feature dosyasında tanımlı olduğu için )
When('Geçersiz kullanıcı adı ve şifre ile giriş yapıyorum', async () => {
    await page.fill(selectors.usernameselector, selectors.invalidusername);
    await page.fill(selectors.passwordselector, selectors.invalidpassword);
    await page.click(selectors.loginButton);
    await page.waitForTimeout(1000);
});

// Hata Mesajı Doğrulama
Then('Hata mesajını gördüğümü doğrula', async () => {
    const errorMessageElement = await page.locator(selectors.error_message);
    const isVisible = await errorMessageElement.isVisible();
    const errorMessageText = await errorMessageElement.textContent();
    assert.strictEqual(isVisible, true, 'Hata mesajı elementi görünür değil');
    assert.strictEqual(errorMessageText.trim(), selectors.error_message_text);
    await page.waitForTimeout(1000);
});

After(async function () {
  if (browser) {
    await browser.close();
  }
});

login.feature

@saucedemo
@login     // GitHub Actions'ta seçeceğimiz tag
Feature: SauceDemo Login Success - Unsuccessful

  @positive
  Scenario: 1-Successful login and logout
    Given Ana sayfaya gidiyorum
    When Geçerli kullanıcı adı ve şifre ile giriş yapıyorum
    Then Envanter sayfasına yönlendirildiğimi doğrula
    When Hesabımdan çıkış yapıyorum
    Then Giriş sayfasına yönlendirildiğimi doğrula

  @negative @regression
  Scenario: 1-Unsuccessful login and error message verification
    Given Ana sayfaya gidiyorum
    When Geçersiz kullanıcı adı ve şifre ile giriş yapıyorum
    Then Hata mesajını gördüğümü doğrula

Yukarıdaki .feature dosyasında,event trigger ile seçmek istediğiniz tag’ı sizde dosyanıza tanımlayarak GitHub Actions’ta tag’ı girerek istediğiniz tag’ı içeren testleri koşabileceksiniz.

@login tagını bu alanda yazacağız

Testleri Run etme

Actions ekranı böyle gelicek. All workflows seçili olarak

Run Tagged workflow’unu seçicez ve ekranda gözüktüğü gibi

.yaml dosyasında belirttiğimiz event trigger ,This workflow has a workflow_dispatch event trigger. uyarısı vericek

Run workflow’a tıklayıp isteğimiz tag’ı seçerek sadece o tag’ı içeren testleri koşturcaz( yeşil Run workflow butonuna tıklayıp testi koşturuyoruz.)

@login tagını içeren testleri bulup onları koşturdu

Test koşturma raporuna bakalım ( Summary Artifacts altında)

Test raporuda başarılı.

Ayrıca GitHub Actions alanı altındaki Job 15087247920 linkine tıklayınca test raporundaki testin olduğu repo ve test run workflow’a gidicek.

Bi deneme daha yapalım @negative tag’ını içeren senaryoyu bulup testi bulup koşmasını isteyelim.

login.feature dosyamızdaki 2. senaryomuz

Testi Run ediyor

@negative tag’ını içeren testi bulup koştu.3 adımlı 1 senaryo buldu.

Yani alttaki test

1 senaryo ve 3 adımlı.

Test raporunda sadece bu senaryo için .feature dosyasındaki @negative tag’ını sahip senaryo’yu yazmalı bakalım ;

Görüldüğü gibi .feature dosyasının tamamını değil workflow’da run ettiği senaryo’yu raporda gösterdi yani raporda buna entegre.

Normal tam .feature dosyası

@login tag’ını içeren testi yani .feature dosyasınıworkflow_dispatch event triggerile çalıştırdık.

Eğer .feature dosyası içinde birden fazla senaryo var ise bunlarada tag ekleyerek tüm .feature dosyasında olan testleri değil sadece istediğimiz tag’a sahip senaryoyu/testi koştururuz , @negative tag’ını içeren senaryoyu koşturduğumuz gibi.

Peki çoklu tag seçersek Actions bunları koşarmı bakalım

farklı .feature dosyalarına ait @login ve @addtochart tag’larını içeren testleri koşucaz

bunun için tag girme alanına “ @login or @addtochart “ şekilde giricez

@login tag’ı başka testte @addtochart tag’ı başka testte (başka feature’larda)

4 senaryo ve 17 adım

Yukarıdaki .feature dosyalarında görüldüğü gibi ;

saucedemologin.feature = 2 senaryo toplam 8 step,

saucedemoAddtoChart.feature = 2 senaryo toplam 9 step,

totalde 4 senaryo ve 17 step koştu.

Raporumuz da sadece belirttiğimiz tagları içeren testleri koştuğumuz şekilde raporluyor.Bakalım (runs/Summary/Artifacts altında)

belirttiğimiz tag’ları içeren testlerin test raporları (@login or @addtochart )

Bu yazımızda belirttiğimiz tag’ı içeren feature dosyasını veya belirttiğimiz tag’ı içeren senaryoları koştuk.

Ayrıca farklı tag’lara sahip feature/testlerini bir arada koştuk ve diğer testlerden ayırdık.

Sizde Cucumber ile testler yazdığınızda .feature dosyalarınıza tag’lar ekleyerek ve GitHub Actions’ta testleri koşmak için oluşturduğumuz .yaml dosyanızı gerekli şekilde yapılandırarak tag içeren testleri izole ederek istediğiniz testleri/feature ları koşturabilirsiniz.

İlgili testleri/senaryoları koşturduğumuz GitHub repom

[embed]Run Tagged Cucumber + Playwright Tests · Workflow runs · MustafaYLDZ93/Cucumber-Playwright Contribute to MustafaYLDZ93/Cucumber-Playwright development by creating an account on GitHub.github.com