OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

JS Class methods scope - in Playwright

  • Thread starter Thread starter Itsmeg3
  • Start date Start date
I

Itsmeg3

Guest
I use Playwright JS for automation using VSCODE. Used Page Obj method to support multiple page/component in application & also test required multiple webpage to be opened so used constructor to assign page

In VSCode , intellisense for class methods is working only in beforeEach block where constructor is invoked. In test block intellisence is not working, pressing ctrl+click on method name pop-ups as "any" , its not showing method defination. I am missing some config, please suggest me what I missing here

In page1.js

Code:
class page1Class {
constructor(page){
         this.page=page;
 }
 async func1(){
      console.log("This is function1");
 }

}module.exports = page1Class ;

In page2.js

Code:
export default  class page2Class extends page1Class  {
constructor(page){
         super(page);
         this.page=page;
 }
 async page2func2(){
      console.log("This is function2 PAGE 2");
 }

}module.exports = page2Class ;

In test files test.spec.js

Code:
import page2Class from "../../../pages/page2.js";
let webpage;

test.beforeEach(async({context}) =>{
    webpage= new page2Class (await context.newPage());
    await webpage.page2func2();
    await webpage.func1();
});

//Test works fine , but in VSCODE I cannot navigate to function definition (using ctrl+click) , its popsup as any 
test("test", async() =>{
    await webpage.page2func2();
    await webpage.func1();
});

In VSCODE in beforeEach block using ctrl+click navigates to function defination, but I cannot navigate to function definition (using ctrl+click) , its popsup as any

<p>I use Playwright JS for automation using VSCODE.
Used Page Obj method to support multiple page/component in application & also test required multiple webpage to be opened so used constructor to assign page</p>
<p>In VSCode , intellisense for class methods is working only in beforeEach block where constructor is invoked. In test block intellisence is not working, pressing ctrl+click on method name pop-ups as "any" , its not showing method defination.
I am missing some config, please suggest me what I missing here</p>
<p>In page1.js</p>
<pre><code>class page1Class {
constructor(page){
this.page=page;
}
async func1(){
console.log("This is function1");
}
</code></pre>
<p>}module.exports = page1Class ;</p>
<p>In page2.js</p>
<pre><code>export default class page2Class extends page1Class {
constructor(page){
super(page);
this.page=page;
}
async page2func2(){
console.log("This is function2 PAGE 2");
}
</code></pre>
<p>}module.exports = page2Class ;</p>
<p>In test files test.spec.js</p>
<pre><code>import page2Class from "../../../pages/page2.js";
let webpage;

test.beforeEach(async({context}) =>{
webpage= new page2Class (await context.newPage());
await webpage.page2func2();
await webpage.func1();
});

//Test works fine , but in VSCODE I cannot navigate to function definition (using ctrl+click) , its popsup as any
test("test", async() =>{
await webpage.page2func2();
await webpage.func1();
});
</code></pre>
<p>In VSCODE in beforeEach block using ctrl+click navigates to function defination, but I cannot navigate to function definition (using ctrl+click) , its popsup as any</p>
 

Latest posts

Top