Oracle APEX 24.2, Cypress and the case of the troublesome Select One List.

A couple of weeks ago you may have seen Isaac's post about Oracle APEX and end-to-end testing with Cypress.

On one of our docker environments, we upgraded APEX 24.2.6 (we also tried 24.2.4) and pointed it to the 24.2 CDN to run our pipeline tests.

This upgrade broke every single one of Isaac's tests where the Select One and Select Many component were being used. I think this may have also broke Combo boxes. The lists were not populating anymore, so any tests that tried to populate these lists failed with errors.

Changing these to work with Pop-LOV solved the issue, but we wanted to use the new components in our apps and keep our automated tests running in our pipeline.

The error: we were getting a CORS (Cross-Origin Resource Sharing) issues that wasn't appearing in previous versions.

This error was vague enough for a Google, and lead us here. Something was now blocking the something else running.

Adding

chromeWebSecurity: false

to our cypress.config.js file looks like it will solve the problem... it didn't...

It gave us this message:

a more meaningful

(uncaught exception)Error: cannot call methods on popup prior to initialization; attempted to call method 'open'

Unfortunately, again after much debugging and googling with no luck, the answer was back on the page I referred to previously, this time here.

Adding

  experimentalModifyObstructiveThirdPartyCode: true,

to our cypress.config.js file, it now solves the problem!

The key point in the documentation is this

which is code that may interfere with Cypress being able to run your web application

So something in APEX 24.* has changed that caused this, whilst it did break a lot of our tests, a simple config setting saved the day, without us having to change our test / application.

Also, we didn't need the first setting, in the end, but having that present did allow us to see the underlying error.

Our final cypress.config.js file looks like this:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  experimentalModifyObstructiveThirdPartyCode: true,

  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});