Testcafe provides an API for taking screenshots of elements or screenshots of the webpage. And we set the test to take screenshots after each test run. We can take screenshots at any moment of test use t.takeScreenshot() it will take a screenshot of the entire page
Or use t.takeElementScreenshot() it will take a screenshot of the element which is specified here.

test ('My first testcafe test',async  t =>{
    const developer_name_input=Selector('#developer-name')
    const submit_button=Selector('#submit-button')
    const articleText=Selector('#article-header').innerText
await t.takeScreenshot({fullPage:true})
//await t.takeElementScreenshot(submit_button)
await t.typeText(developer_name_input,'Jhon')
await t.click(submit_button)
await t.expect(articleText).contains('Mipuel')
})

Run the test npm run test:chrome

After running the test it will create a file in the testcafe folder

It will show output

After we select an element in the screenshot

test ('My first testcafe test',async  t =>{
    const developer_name_input=Selector('#developer-name')
    const submit_button=Selector('#submit-button')
    const articleText=Selector('#article-header').innerText
//await t.takeScreenshot({fullPage:true})
await t.takeElementScreenshot(submit_button)
await t.typeText(developer_name_input,'Jhon')
await t.click(submit_button)
await t.expect(articleText).contains('Mipuel')
})

It will show only the element which is specified in test

Taking screenshot automatically

For that create a new file under testcafe that is testcaferc.json in that file write code

{
    "screenshotPath":"./screenshots",
    "screenshotPathPattern":"${DATE}_${TIME}/${FIXTURE}.png"
}

Then go to pakage.json  add this ./tests -s teakeOnFails=true

"scripts": {
    "test:chrome": "testcafe chrome ./tests_$ teakeOnFails=true",
    "test:chrome:headless":"testcafe chrome:headless ./tests",
    "test:chrome:mobile":"testcafe chrome:emulation:device=iphone x ./tests",
    "test:firefox": "testcafe firefox ./tests"
  },

It will not show any screenshot because the test run successfully Change the name in basic.test.js

test ('My first testcafe test',async  t =>{
    const developer_name_input=Selector('#developer-name')
    const submit_button=Selector('#submit-button')
    const articleText=Selector('#article-header').innerText
//await t.takeScreenshot({fullPage:true})
await t.takeElementScreenshot(submit_button)
await t.typeText(developer_name_input,'Jhon')
await t.click(submit_button)
await t.expect(articleText).contains('Mipuel')
})

Now run the test npm run test:chromeIt will show a screenshot because the test is failed.