Get CSS string value from locator page object in MS Playwright

Question

Lets say I have a class containing page objects. If I instantiate that class in a test, then I can use the page objects as you normally would with playwright. I would like to get the css value as a string from one of those page objects so I can use it in a custom function.

This should give you an idea of what I mean

    export class PageObjects{
        constructor(page){
            this.obj1 = page.locator('#table tbody tr')
        }
    }

    test('Get Values and header names from a table', async({page})=> {
        // Page objects
        const pageObjects = new PageObjects(page)

        // I want the css from the page object?? in other words  
        // how do I pull out the '#table tbody tr' css value as a string?
        // in other words I want cssString value to be #table tbody tr
        // I have tried _selector but it just returns an empty string
        cssString = pageObjects.obj1.??????


    })

is there a way to get the css value out of a locator?

Answer 1

I found out you can just instantiate the page object in the test and then turn it into a string and use slice to keep everything after the first 8 characters. You can then use the evaulate(el=>{}) method to use the selector you got from the page object. Here I selected the body element so that I could effectively get the entire page and do whatever I need to do. I don't think the playwright creators intended for you to use this in this way but it makes it possible to create custom functions to handle just about anything you need when playwright doesn't work as planned.

    // you can get the locator string with mylocator.toString()
// which will look like this:  Locator@select[id="theid"]
let locatorString = select.toString()

locatorString = locatorString.slice(8)

await page.locator('body').evaluate((body,arr) => { 
    body = body as HTMLElement
    
    let locatorString = arr[0]

    dom.querySelector(locatorString)
 // the array at the end of the evauluate method is where you pass in your arguments that the method will receive
 }, [locatorString])