Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

Bug Report: stepByStepReport not capturing screenshots in CodeceptJS 3.6+

未關閉
  • 哪裡不對？
#5,351 1 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

還沒有人認領這個 Issue。

評估

難度
2/5
預估耗時
1-3 小時
新手友好度
45/100
Issue 類型
缺陷
描述清晰度
描述清楚
活躍度
停滯
技術堆疊
javascript, playwright
領域
testing

研究方向

從 lib/plugin/stepByStepReport.js 開始，在 3.7.5 版本上使用提供的最小 CodeceptJS 設定重現問題。檢查 event.step.after 處理常式和 recorder 的使用方式，然後驗證失敗的測試是否會在一般執行和並行執行中都於 output/record*/ 產生預期的 PNG 螢幕擷取畫面。

由索引模型根據 Issue 內容生成。

描述

stale

Hello,

The stepByStepReport plugin does not capture screenshots after each step in CodeceptJS versions 3.6.0 through 3.7.5. The record_*/ directory is created but only contains an empty index.html file with no screenshots (PNG files).

Affected Versions

  • Broken: CodeceptJS 3.6.0, 3.6.1, 3.6.2, 3.6.3, 3.6.4, 3.7.0, 3.7.1, 3.7.2, 3.7.3, 3.7.4, 3.7.5
  • Working: CodeceptJS 3.5.0 and earlier

Root Cause

The bug was introduced in commit 1040494 (Jun 8, 2024) titled "fix: screenshot error in beforeSuite/AfterSuite (#4385)".

The Change

In lib/plugin/stepByStepReport.js, the event.step.after handler was changed:

Before (working - v3.5.0):

event.dispatcher.on(event.step.after, (step) => {
  recorder.add('screenshot of failed test', async () => persistStep(step), true);
});

After (broken - v3.6+):

event.dispatcher.on(event.step.after, persistStep);
Why This Breaks

The persistStep function is an async function that calls helper.saveScreenshot(). In the original implementation, this was wrapped in recorder.add(), which properly queues the async operation and waits for completion.

In the new implementation, persistStep is called directly as an event handler callback. Since it's an async function, the event dispatcher doesn't wait for it to complete. The screenshots are never captured because:

  1. The async function starts executing
  2. The event dispatcher immediately moves on to the next event
  3. The screenshot operation may be cancelled or never completes

Reproduction Steps

  1. Create a minimal CodeceptJS config with only stepByStepReport enabled
  2. Run any test that fails (to keep the report)
  3. Check the _output/record_*/ directory
  4. The directory contains only index.html with no PNG files
Minimal Reproduction
// codecept.minimal.conf.js
const path = require('path');

exports.config = {
  output: path.resolve(__dirname, '_output'),
  helpers: {
    Playwright: {
      browser: 'chromium',
      url: 'https://www.google.com',
      show: true
    }
  },
  plugins: {
    stepByStepReport: {
      enabled: true
    }
  },
  tests: './test_minimal.js',
  name: 'minimal-test'
};

// test_minimal.js
Feature('Minimal Test');

Scenario('Test stepByStepReport', ({ I }) => {
  I.amOnPage('https://www.google.com');
  I.wait(2);
  I.see('Google');
  I.see('TEXT THAT DOES NOT EXIST'); // Force failure to keep report
});

Run with:

npx [email protected] run --config codecept.minimal.conf.js

Expected: _output/record_*/ contains 0000.png, 0001.png, etc.
Actual: _output/record_*/ contains only index.html with no PNGs

Suggested Fix

Restore the original behavior by wrapping persistStep in recorder.add():

event.dispatcher.on(event.step.after, step => {
  recorder.add('screenshot of step of test', async () => persistStep(step), true);
});

This ensures the async screenshot operation is properly queued and executed.

Additional Context

  • This issue has been reported before as #4856 (Feb 2025) and is a follow-up of #4637
  • The original fix was intended to prevent errors in BeforeSuite/AfterSuite hooks, but it inadvertently broke the core screenshot functionality
  • The issue affects both single-run and parallel execution modes

Environment

  • CodeceptJS: 3.7.5
  • Node.js: 20.x
  • Playwright: 1.57.0
  • OS: Linux (Ubuntu 22.04)

Written with help from Claude 4.5 Opus.

主要語言
JavaScript
星號
4.2k
分支
756
平均合併
1 天 6 小時
30 天內合併 PR
19

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

codeceptjs/CodeceptJS 的其他 Issue

查看 codeceptjs/CodeceptJS 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。