marcol / vue-cli-plugin-e2e-playwright Goto Github PK

The cli plugin launches the server and works perfectly with a hard-coded base url. Is there any way to get the server url from within the test so that the base url will always be correct?

const base_url='http:/192.168.1.10:8100/'; // <= want to get this from the cli plugin/mocha somehow?
page = await browser.newPage();
await page.goto(base_url);

 WARN  conflicting versions for project dependency "@vue/test-utils":

       - ^2.0.0-0 injected by generator "@vue/cli-plugin-unit-mocha"
       - ^1.0.4 injected by generator "vue-cli-plugin-e2e-playwright"

       Using newer version (^2.0.0-0), but this may cause build errors.

How to reproduce

I create preset https://cli.vuejs.org/guide/plugins-and-presets.html:

Step 1: Create file

./my-preset/preset.json

{
  "useConfigFiles": true,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-typescript": {
      "classComponent": false,
      "useTsWithBabel": true
    },
    "@vue/cli-plugin-router": {
      "historyMode": true
    },
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": [
        "save",
        "commit"
      ]
    },
    "@vue/cli-plugin-unit-mocha": {},
    "vue-cli-plugin-e2e-playwright": {}
  },
  "vueVersion": "3",
  "cssPreprocessor": "dart-sass"
}

Step 2: run command

vue create --preset ./my-preset test --packageManager=npm

I have an application written in Typescript. I'd like to also write tests in Typescript. Playwright, Mocha and Chai all support Typescript, but I cannot figure out how to structure the code. I keep getting errors such as SyntaxError: Cannot use import statement outside a module.

I've come up with something like this, but I suspect the Typescript compiler does not like having method invocations outside of a class:

import { expect } from "chai";
import { describe } from "mocha";


describe("My example E2E test with Playwright", () => {
  let browser!: Browser;
  let page!: Page;

  before(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
    await page.goto("https://www.example.com/");
  });

  after(async () => {
    await page.close();
    await browser.close();
  });

  it("has header", async () => {
    const h1 = await page.$("h1");
    const text = await h1?.innerText();
    expect(text).to.equal("Example Domain");
  });
});

If this is something you know how to structure, would you please be able to add a snippet in the doco for this project. That would be most appreciated.

If not, no problems.

Thanks

Hi, we are having issue using es2020 operator chaining with your plugin -
we are getting this error:
You may need an additional loader to handle the result of these loaders.

`You may need an additional loader to handle the result of these loaders.
|
| isParamLocked() {

  return this.getUpdatedLocks?.lockCollisions?.get(this.paramName);

| }`

Is there any setting we can change to make it work?