Discover AI-native insights at Testμ Conference‘25

How to use purgeCloudflareCache method in Cypress

Best JavaScript code snippet using cypress

utilsController.js

Source:utilsController.js

...203      .update('editedAt', Math.floor(Date.now() / 1000))204      .catch(console.error)205  }206  if (config.cloudflare.purgeCache) {207    // purgeCloudflareCache() is an async function, but let us not wait for it208    const names = filtered.map(file => file.name)209    utilsController.purgeCloudflareCache(names)210  }211  return failed212}213utilsController.purgeCloudflareCache = async names => {214  if (!cloudflareAuth) { return }215  const thumbs = []216  names = names.map(name => {217    const url = `${config.domain}/${name}`218    const extname = utilsController.extname(name)219    if (utilsController.mayGenerateThumb(extname)) {220      thumbs.push(`${config.domain}/thumbs/${name.slice(0, -extname.length)}.png`)221    }222    return url223  })...

upload.js

Source:upload.js

...73    'zip filename should end with .zip', zipName)74  const osName = getUploadNameByOsAndArch(platform)75  la(check.unemptyString(osName), 'missing osName', osName)76  const url = getDesktopUrl(version, osName, zipName)77  return purgeCloudflareCache(url)78}79// purges links to desktop app for all platforms80// for a given version81const purgeDesktopAppAllPlatforms = function (version, zipName) {82  la(check.unemptyString(version), 'missing desktop version', version)83  la(check.unemptyString(zipName), 'missing zipName', zipName)84  const platforms = ['darwin', 'linux', 'win32']85  console.log(`purging all desktop links for version ${version} from Cloudflare`)86  return Promise.mapSeries(platforms, (platform) => {87    return purgeDesktopAppFromCache({ version, platform, zipName })88  })89}90// all architectures we are building test runner for91const validPlatformArchs = ['darwin-x64', 'linux-x64', 'win32-ia32', 'win32-x64']...

index.js

Source:index.js

...20    })21    await app.process()22    return app.build()23}24async function purgeCloudflareCache(urls) {25    for (let index = 0; index < urls.length; index += 30) {26        let sliced = urls.slice(index, index + 30 < urls.length ? urls.length : index + 30)27        try {28            let res = await request(29                {30                    url: `https://api.cloudflare.com/client/v4/zones/${cf_zone_id}/purge_cache`,31                    method: 'POST',32                    body: {33                        "files": sliced34                    },35                    json: true,36                    headers: {37                        "X-Auth-Email": cf_email,38                        "X-Auth-Key": cf_key39                    }40                })41            console.log(JSON.stringify(res))42        } catch (e) {43            console.log(JSON.stringify(e))44        }45    }46}47function collectTargets(body) {48    let targets = new Set()49    body.commits.forEach(commit => {50        let changes = commit.added.concat(commit.removed).concat(commit.modified)51        changes.forEach(change => {52            let i = change.indexOf('/')53            if (i != -1) {54                let target = change.substring(0, i)55                if (target in sites) {56                    targets.add(target)57                }58            }59        })60    })61    return targets62}63function collectFiles(parent, files) {64    fs.readdirSync(parent).forEach(file => {65        var child = parent + path.sep + file;66        if (fs.lstatSync(child).isDirectory()) {67            collectFiles(child, files);68        } else {69            files.push(parent + path.sep + file);70        }71    });72}73function collectUrls(target, path) {74    let urls = new Set()75    let files = []76    collectFiles(path, files)77    for (const file of files) {78        urls.add(`https://${sites[target]}/${file.replace(path, "").replace(/\\/g, "/").substring(1)}`)79    }80    return urls81}82http.createServer(function (req, res) {83    let body = []84    req.on('error', (err) => {85        console.error(err)86    }).on('data', function (data) {87        body.push(data)88    }).on('end', async () => {89        res.on('error', (err) => {90            console.error(err)91        })92        body = Buffer.concat(body).toString()93        let sig = "sha1=" + crypto.createHmac('sha1', secret).update(body).digest('hex')94        if (process.env.NODE_ENV === 'production') {95            if (req.headers['x-hub-signature'] != sig) {96                console.error(`bad request: ${req.headers['x-hub-signature']} rather than ${sig}`)97                res.statusCode = 40398                res.end()99                return100            }101        }102        let targets103        try {104            targets = collectTargets(JSON.parse(body))105        } catch (e) {106            console.log(e)107            res.write(e.toString())108            res.write('\n')109        }110        targets.forEach(value => {111            res.write(`Site https://${sites[value]} requires rebuild.\n`)112            console.log(`Site https://${sites[value]} requires rebuild`)113        })114        res.write("Calling git pull...\n")115        console.log("Calling git pull")116        let child = spawn('git', ['pull'])117        child.stdout.on('data', function (data) {118            res.write(data)119            console.log(data.toString())120        })121        child.stderr.on('data', function (data) {122            res.write(data)123            console.error(data.toString())124        })125        child.on('close', async (code) => {126            res.write(`Child process exited with code ${code}`)127            console.log(`Child process exited with code ${code}`)128            res.statusCode = 200129            res.end()130            for (const target of targets) {131                console.log(`vuepress build ../${target}...`)132                await buildVuePress(`../${target}`)133                console.log(`purge Cloudflare cache...`)134                let urls = collectUrls(target, `../${target}/.vuepress/dist`)135                urls.forEach(value => {136                    console.log(`Url ${value} requires purge cache`)137                })138                await purgeCloudflareCache(urls)139            }140        })141    })...

entrypoint.mjs

Source:entrypoint.mjs

...19    20    if (sha256Hash !== expectedWindowsSha256Hash)21      throw new Error(`sha256sum doesn't match for downloaded ${windowsFilename}`)22    await $`b2 upload-file --quiet --noProgress --sha1 ${sha1Hash} assets-birkhoff-me ./${windowsFilename} clash.exe`23    await purgeCloudflareCache(["https://assets.birkhoff.me/clash.exe"])24  })(),25  (async () => {26    await $`wget -q -O ${macosFilename} ${macosUrl}`27    const sha256Hash = await hashFile(macosFilename, "sha256")28    const sha1Hash = await hashFile(macosFilename, "sha1")29    if (sha256Hash !== expectedMacosSha256Hash)30      throw new Error(`sha256sum doesn't match for downloaded ${macosFilename}`)31    await $`b2 upload-file --quiet --noProgress --sha1 ${sha1Hash} assets-birkhoff-me ./${macosFilename} clash.dmg`32    await purgeCloudflareCache(["https://assets.birkhoff.me/clash.dmg"])33  })()34])...

cloudflare.mjs

Source:cloudflare.mjs

1export async function purgeCloudflareCache (files) {2  const req = await fetch(`https://api.cloudflare.com/client/v4/zones/${process.env.CF_ZONE_ID}/purge_cache`, {3    method: 'post',4    headers: {5      'Content-Type': 'application/json',6      'Authorization': `Bearer ${process.env.CF_API_TOKEN}`7    },8    body: JSON.stringify({ files }),9  })10  const resp = await req.json()11  if (!resp.success) {12    throw new Error(JSON.stringify(resp))13  }...

Using AI Code Generation

1Cypress.Commands.add('purgeCloudflareCache', (url) => {2  cy.request({3    headers: {4    },5    body: {6    },7  });8});9Cypress.Commands.add('purgeCloudflareCache', (url) => {10  cy.request({11    headers: {12    },13    body: {14    },15  });16});17Cypress.Commands.add('purgeCloudflareCache', (url) => {18  cy.request({19    headers: {20    },21    body: {22    },23  });24});25Cypress.Commands.add('purgeCloudflareCache', (url) => {26  cy.request({27    headers: {28    },29    body: {30    },31  });32});

Using AI Code Generation

1import { purgeCloudflareCache } from 'cypress-cloudflare-cache'2describe('test', () => {3it('test', () => {4})5})6import { purgeCloudflareCache } from 'cypress-cloudflare-cache'7describe('test', () => {8it('test', () => {9})10})11import { purgeCloudflareCache } from 'cypress-cloudflare-cache'12describe('test', () => {13it('test', () => {14purgeCloudflareCache()15})16})17import { purgeCloudflareCache } from 'cypress-cloudflare-cache'18describe('test', () => {19it('test', () => {20purgeCloudflareCache(['tag1', 'tag2'])21})22})23import { purgeCloudflareCache } from '

Using AI Code Generation

1describe("My Test", () => {2  it("Should do something", () => {3  });4});5describe("My Test", () => {6  it("Should do something", () => {7  });8});

Using AI Code Generation

1const purgeCloudflareCache = require('cypress-cloudflare-cache-purge').purgeCloudflareCache;2describe('My First Test', function() {3  it('Does not do much!', function() {4    cy.contains('Some Text');5  })6})

StackOverFlow community discussions

Questions

Discussion

Cypress-get value out of callback function

Is there a code generator for Cypress testing tool

Intercept the same API call multiple times in Cypress

Stubbing functions on Cypress.io being ignored

How to solve "not a valid XPath expression" error in Cypress?

Cypress: Stubbing a particular key in JSON response

Using Cypress select() When Select Contains Duplicate Values

How to stub contentwindow.print with cypress/test printJS with cypress

Cypress: Wait for all requests to /graphql endpoint

How to create a function to avoid repetitive steps?

Do the loop within a function. The function returns when item is found, or repeats for next page.

If it gets to page 7 without finding, fail the test (or return a message).

const findFile = (expected, pageSize, maxPages, pageNo = 1) => {

  if (pageNo === maxPages) {
    throw `"${expected} was not found`
  }

  return cy.request({
    ...
    qs:{ pageNo ,pageSize },
    ...
  }).then(response => {

    const files = response.body.data
    const foundFiles = files.filter(file => file.fileName === expected)

    if (!foundFiles.length) {  // not on this page, try next
      pageNo = pageNo + 1
      findFile(expected, pageSize, maxPages, pageNo)
    } else {
      return foundFiles  // if you want the matching objects
    }
  })
})

it('finds a file', () => {

  findFile('file123.txt', 15, 7).then(foundFiles => {
    // example further assertion on found files
    foundFiles.forEach(file => expect(file.fileName).to.eq('file123.txt'))
  })
})

https://stackoverflow.com/questions/68884692/cypress-get-value-out-of-callback-function

Updated for Cypress v7.0.0 Released 04/05/2021

The change-log shows from this release the intercepts are now called in reverse order

Response handlers (supplied via event handlers or via req.continue(cb)) supplied to cy.intercept() will be called in reverse order until res.send is called or until there are no more response handlers.

Also illustrated in this diagram from the documentation

When you set up identical intercepts, the first one will grab all the calls. But you can wait on the first alias multiple times.

Here's a (reasonably) simple illustration

spec

Cypress.config('defaultCommandTimeout', 10); // low timeout
                                             // makes the gets depend on the waits 
                                             // for success

it('never fires @call2',()=>{

  cy.intercept({ pathname: "/posts", method: "POST" }).as("call1")
  cy.intercept({ pathname: "/posts", method: "POST" }).as("call2")

  cy.visit('../app/intercept-identical.html')
  
  cy.wait('@call1')                               // call1 fires 
  cy.get('div#1').should('have.text', '201')

  cy.wait('@call2')                               // call2 never fires
  cy.wait('@call1')                               // call1 fires a second time
  cy.get('div#2').should('have.text', '201')

})

app

<body>
  <div id="1"></div>
  <div id="2"></div>
  <script>

    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
      }).then(response => {
        document.getElementById('1').innerText = response.status;
      })
    }, 500)
  
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 2 }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
      }).then(response => {
        document.getElementById('2').innerText = response.status;
      })
    }, 1000)

  </script>
</body>

You can see it in the Cypress log,

command	call#	occurrence (orange tag)
wait	@call1	1
wait	@call2
wait	@call1	2

https://stackoverflow.com/questions/66765452/intercept-the-same-api-call-multiple-times-in-cypress

You have to setup babel plugin plugin-transform-modules-commonjs with loose: true

[
    '@babel/plugin-transform-modules-commonjs',
    {
        loose: true,
    },
]

Example config of your cypress/plugins/index.js

const { startDevServer } = require('@cypress/webpack-dev-server');
const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig');

// taken from https://github.com/cypress-io/code-coverage/issues/461#issuecomment-859292331
function customDevServer(
    on,
    config,
    { webpackConfigPath } = {
        webpackConfigPath: 'react-scripts/config/webpack.config',
    }
) {
    on('dev-server:start', async (options) => {
        const webpackConfig = findReactScriptsWebpackConfig(config, {
            webpackConfigPath,
        });
        const rules = webpackConfig.module.rules.find((rule) => !!rule.oneOf).oneOf;
        const babelRule = rules.find((rule) => /babel-loader/.test(rule.loader));
        babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'), [
            '@babel/plugin-transform-modules-commonjs',
            {
                loose: true,
            },
        ]);
        return startDevServer({
            options,
            webpackConfig,
        });
    });

    config.env.reactDevtools = true;

    return config;
}

module.exports = (on, config) => {
    if (config.testingType === 'component') {
        customDevServer(on, config);
    }

    require('@cypress/code-coverage/task')(on, config);

    return config;
};

The issue link on github: https://github.com/cypress-io/cypress/issues/18662

https://stackoverflow.com/questions/69737283/stubbing-functions-on-cypress-io-being-ignored

I used contains and it works. there is an icon in my XPath and it couldn't find just the text.

cy.xpath(`//*[contains(text(), 'search ${keyword}')]`)

https://stackoverflow.com/questions/72583842/how-to-solve-not-a-valid-xpath-expression-error-in-cypress

You can use the cy.route2() from cypress:

Go to cypress.json and write "experimentalNetworkStubbing": true

In your test.spec file write:

cy.route2('GET', '/users/current', (req) => {
    req.reply((res) => {
        let list = JSON.parse(res.body)
        list.ds_version = 1
        res.send(list)
    })
})

https://stackoverflow.com/questions/64641946/cypress-stubbing-a-particular-key-in-json-response

You can try dropping down to jQuery/JavaScript to manually set the field:

cy.get('select').then($country => {$country.val("gb")})

The $country above should be a jQuery object wrapping the html that you selected.

See: https://docs.cypress.io/api/commands/then.html#Syntax

https://stackoverflow.com/questions/56633089/using-cypress-select-when-select-contains-duplicate-values

The problem is the onBeforeLoad hook is called before printJS is initiated, when printJS is imported it invokes it's init() function and overwrites your stub in window.print.

This is stubbing too soon

cy.visit('http://127.0.0.1:8000/notices/new/',{
    onBeforeLoad: (win) => {
        cy.stub(win, 'printJS')
    }
})

Stubbing after component has loaded and printJS is initiated

const printStub

before(function(){

  cy.visit('http://127.0.0.1:8000/notices/new/')

  // maybe wait for loading to complete

  cy.window().then(win => {
    printStub = cy.stub(win, 'printJS')
  })
})

it('stubs printJS', () => {
  cy.contains('button', 'Print').click()
  cy.window().then(win => {
    expect(printStub).to.be.calledOnce
  })
})

https://stackoverflow.com/questions/53505706/how-to-stub-contentwindow-print-with-cypress-test-printjs-with-cypress

Cypress detected that you returned a promise from a command... refers to the fact that you are waiting on the intercept alias within the handler.

Since the handler is event response code, the usual pattern is

cy.intercept(...)  // set up the listener

cy.visit(...)  // trigger the events (might also be from UI event like click())

cy.wait('@my-alias')

But this means the aliases should be known ahead of time.

Simplest is if you can find out all the ids,

const aliases = ['1', '2', '3'].map(id => `@gql${id}Query`)

const handleGraphql = (req) => req.alias = `gql${req.headers['query-id']}Query`;

before(() => {
  cy.intercept('POST', '**/graphql', handleGraphql)  // set up the listener
})

it('waits for all ids', () => {
  cy.visit(...)  // trigger the events (might also be from UI event like click())

  cy.wait(aliases)
}

If you can't be specific about the ids, then you either need to wait an arbitrary time for all requests to happen (which is flaky if the wait is too short, or annoying if the wait is too long) or assert an element or other DOM artefact that only appears after all requests are finished.

Your id's are generated, so don't use them in the alias. Use a "generic" alias and wait for the required count

const calls = 4

before(() => {
 cy.intercept('POST', '**/graphql').as('gqlQuery')
})

it('waits for all ids', () => {
 cy.visit(...)  // trigger the events (might also be from UI event like click())

 cy.wait(`@gqlQuery.${calls}`)
}

There's some warnings around the alias.n syntax being undocumented, but you could substitute

Cypress._.times(calls, () => cy.wait('@gqlQuery'))

https://stackoverflow.com/questions/70963440/cypress-wait-for-all-requests-to-graphql-endpoint

You can achieve this with a custom command. You said you tried one and it didn't work, but I am doing something similar successfully in my tests.

Cypress.Commands.add("check403", () => {
  cy.get('[data-qa="http-error.section"]')
    .should('exist')
    .should('contain', '403'); // I changed this - you didn't mention that it
      // didn't work, but it would have been returning an element, not asserting
});

https://stackoverflow.com/questions/53764361/how-to-create-a-function-to-avoid-repetitive-steps

Blogs

Check out the latest blogs from LambdaTest on this topic:

How To Generate Mocha Reports With Mochawesome?

“Testing leads to failure, and failure leads to understanding.”

How To Automate Login Page Using Selenium WebDriver?

Selenium has always been the most preferred test automation framework for testing web applications. This open-source framework supports popular programming languages (e.g. Java, JavaScript, Python, C#, etc.), browsers, and operating systems. It can also be integrated with other test automation frameworks like JUnit, TestNG, PyTest, PyUnit, amongst others. As per the State of open source testing survey, Selenium is still the king for web automation testing, with 81% of organizations preferring it over other frameworks.

August ’21 Updates: Live With iOS 14.5, Latest Browsers, New Certifications, & More!

Hey Folks! Welcome back to the latest edition of LambdaTest’s product updates. Since programmer’s day is just around the corner, our incredible team of developers came up with several new features and enhancements to add some zing to your workflow. We at LambdaTest are continuously upgrading the features on our platform to make lives easy for the QA community. We are releasing new functionality almost every week.

How To Deal With “Element is not clickable at point” Exception Using Selenium

Any automation testing using Selenium (or Cypress) involves interacting with the WebElements available in the DOM. Test automation framework underpins a diverse set of locators that are used to identify and interact with any type of element on the web page. For example, ID, name, className, XPath, cssSelector, tagName, linkText, and partialLinkText are some of the widely used that help you interact with the elements on the web page. These locators help you perform any type of web element interactions using Selenium.

How to Write Test Scripts in Selenium

When it comes to automation testing, the first thing that strikes most of our minds is Selenium. Selenium is one of the best automation frameworks and is being widely used by automation testers for writing the tests and designing the automation framework. It is compatible with multiple programming languages like Java, Python, JavaScript, PHP, Ruby, and C#. It also supports running the tests across various browsers like Chrome, Firefox, Microsoft Edge, Internet Explorer, and much more; making it an ideal choice for test automation.

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

What is Cypress? -
Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.