多次執行 cypress 並將結果保存在 Cypress 版本 12.10.0 中的不同螢幕截圖資料夾中：解決問題

Question

我正在嘗試創建一個資料夾來將從Cypress 捕獲的螢幕截圖保存在螢幕截圖內的自訂資料夾中，其中在ScreenshotFolder 資料夾中，將為每次執行run.cypress() 動態添加一個帶有日期的資料夾，但它不起作用。

問題是，當執行程式碼 run.cypress() 時，最後它會更改我放置的路線並保留預設路線。

程式碼可以執行，如下：

const cypress = require('cypress');
const fs = require('fs');
const path = require('node:path'); 

//Function that create the test run
var createRunTest = async function (info, folderNameResults){

   //Datetime will be modified every time that the function is called
   var datetime2 = new Date(); //test start date
   datetime2 = datetime2.toISOString().slice(0, 19).replace('T', '_');
   datetime2 = datetime2.replace(/:\s*/g, '_');

   //Then I create the folders of the results for reports and screenshots with the number of execution and his datetime
   //Creation datetime folder in reports (time it runs)
   var reportsFolder = path.join(__dirname, 'cypress', 'reports', folderNameResults, cronInfo.execution_num + '_' + datetime2);
   fs.mkdir(reportsFolder, (err) => {
       if (err) {
          if (err.code == 'EEXIST') return console.error("file exist");
          return console.error(err);
       }
   });

   //Creation datetime folder in screenshots (time it runs)
   var screenshotsFolder = path.join(__dirname, 'cypress', 'screenshots', folderNameResults, info.execution_num + '_' + datetime2);
   fs.mkdir(screenshotsFolder, (err) => { 
       if (err) {
          if (err.code == 'EEXIST') return console.error("file exist");
          return console.error(err);
       }
   });


   console.log("It should be: ", screenshotsFolder);

   let results = await cypress.run({
       browser: 'chrome',
       configFile: __dirname + '/cypress.config.js',
       spec: __dirname + '/cypress/e2e/investigation/testWeb.cy.js', //put your test here
       reporter: "cypress-multi-reporters",
       reporterOptions: {
           "reporterEnabled": "mochawesome",
           "mochawesomeReporterOptions": {
               "reportDir": reportsFolder + "/json/",
               "overwrite": false,
               "html": false,
               "json": true
           }
       },
       videosFolder: __dirname + '/cypress/videos',
       screenshotsFolder: screenshotsFolder,
   });
   console.log("But it is this", results.config.screenshotsFolder);

   info.execution_num += 1;

   return;
}



//Here i have information of execution times
var info = {
    id: 1
    created: new Date().toISOString().slice(0, 10),
    execution_num: 0, //execution number
}

var folderNameResults = info.id + '_' + info.created;


//here i create a folder with folderNameResults in directories "cypress/reports/ and cypress/screenshots"
//i.e. remaining as follow: cypress/reports/1_05_17_2023 (and the same with screenshots)

fs.mkdir(__dirname + '/cypress/reports/' + folderNameResults, (err) => { //creation in REPORTS
    if (err) {
        if (err.code == 'EEXIST') return console.error("file exist");
        return console.error(err);
    }
});

fs.mkdir(__dirname + '/cypress/screenshots/' + folderNameResults, (err) => { //creation in SCREENSHOTS
    if (err) {
        if (err.code == 'EEXIST') return console.error("file exist");
        return console.error(err);
    }
});


//Then i call the function to create a execution test
console.log("FIRST EXECUTION"); //increment +1 execution number (1)
createRunTest(info, folderNameResults).then( () => {
    console.log("SECOND EXECUTION");
    //increment +1 execution number (2)
    createRunTest(info, folderNameResults);
});

在第一次執行中，輸出顯示它不起作用：

It should be:  C:\Users\xeom\Desktop\Ayudantia\v2_script\script/cypress/screenshots/1_2023-05-17/0_2023-05-17_19_32_30

But it is this C:\Users\xeom\Desktop\Ayudantia\v2_script\script\cypress\screenshots

所以發生的情況如下圖所示：

包含每次執行的擷取的檔案儲存在您建立的資料夾之外，也會在testWeb.cy.js 資料夾中覆寫（每個執行資料夾都應該有一個這樣命名的資料夾） 。 < /p>

此外，我們可以看到，透過報告，它的效果非常好。

如何修復它？

Answer 1

Wandille 是正確的，您只是將配置設置在錯誤的位置 - 所以我懷疑您正在努力學習基礎知識。

我建議使用 before() 設定螢幕截圖路徑，這樣更改不僅適用於模組 API 呼叫，還適用於 cypress run 和 cypress open。

before(() => {
  const folderName = 'ROX';
  const timestamp = (new Date())
    .toISOString()
    .slice(0, 19)
    .replace('T', '_')
    .replace(/:\s*/g, '_')
  
  const myScreenshotsFolder = `${folderName}/${timestamp}`
  
  Cypress.Commands.overwrite('screenshot', (originalFn, subject, ...args) => {
    let {name, userOptions} = args
    name = `${myScreenshotsFolder}/${(name || Cypress.currentTest.title)}`
    originalFn(subject, name, userOptions)
  })
})

註解：

• 您想要的額外路徑 myScreenshotsFolder 會自動加入到基本路徑 cypress/screenshots

• #您的測試定義檔名 cy.screenshot('some-file-name') 將使用它，否則使用測試標題。這遵循賽普拉斯目前的慣例。

• before() 應放入 cypress/support/e2e.js 檔案以供全域使用

Answer 2

screenshotsFolder 應位於 config 部分

let results = await cypress.run({
    browser: 'chrome',
    configFile: __dirname + '/cypress.config.js',
    //spec: __dirname + '/cypress/e2e/investigacion/testWeb.cy.js',
    reporter: "cypress-multi-reporters",
    reporterOptions: {
        "reporterEnabled": "mochawesome",
        "mochawesomeReporterOptions": {
            "reportDir": "cypress/reports/" + folderName + '/' + datetime + "/json/",
            //"reportDir": "cypress/reports/json/",
            "overwrite": false,
            "html": false,
            "json": true
        }
    },
    config:{
       videosFolder: __dirname + '/cypress/videos',
       screenshotsFolder: screenshotsFolder
    }
});

程式碼來源