Click the button using playwright

Question

I have a problem with playwright using python for automation, when I manipulate a button on the website, i had a problem, because it gives me an error, first I will show the code in Python

button = page.locator("button.p-ripple").first()
button.click()

In this case, I want to press this button, it is inside a p button, apparently an element used in Angular. I'm calling this method inside the function I created that has page as a parameter, and in this case I use the function inside main

This is the result when selecting the element from the DOM

document.querySelectorAll("button.p-ripple")
result -> NodeList [ button.p-button.p-component.p-ripple ]

This is the result right after placing the indexing, it finds the element

document.querySelectorAll("button.p-ripple")[0]
result -> <button class="p-button p-component p-ripple" pripple="" type="button">

I wanted to do the same with playwright using python, but neither first() nor nth(index) work for me, this error appears

'Locator' object is not callable File "/file.py", line 84, in function_python button = page.locator("button.p-ripple").first() ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/file.py", line 133, in main function_python(page) File "/file.py", line 140, in main() TypeError: 'Locator' object is not callable

(on line 84 is where the locator is, on line 133 is where the function I created within the main function is located, its function is to call the browser page, on line 140 is the main function that I call in the initializer)

from playwright.sync_api import sync_playwright

def main():
    with sync_playwright() as playwright:
        firefox = playwright.firefox
        browser = firefox.launch(headless=False)
        context = browser.new_context()
        timeout = 60000
        
        page = context.new_page()
        page.set_default_navigation_timeout(timeout)
        page.set_default_timeout(timeout)
        
        login(page)
        function_python(page)
        browser.close()


if __name__ == "__main__":
    main()

Where do I instantiate page and initialize main

This is element

<lib-pesquisa _nghost-hbk-c66=""><div _ngcontent-hbk-c66="" class="p-d-flex p-12 p-mb-3"><button _ngcontent-hbk-c66="" icon="pi pi-plus" label="Button1" pbutton="" type="button" class="p-button-success p-button p-component"><span class="p-button-icon p-button-icon-left pi pi-plus" aria-hidden="true"></span><span class="p-button-label">Button1</span></button><p-button _ngcontent-hbk-c66="" icon="pi pi-search" label="Button2" class="p-ml-3"><button pripple="" type="button" class="p-button p-component p-ripple"><!----><span class="pi pi-search p-button-icon p-button-icon-left ng-star-inserted" aria-hidden="true"></span><!----><span class="p-button-label" aria-hidden="false">Button2</span><!----></button></p-button></div><p-dialog _ngcontent-hbk-c66="" header="Button2" class="ng-tns-c62-1"><!----></p-dialog></lib-pesquisa>

Button I want to click

<button pripple="" type="button" class="p-button p-component p-ripple"><!----><span class="pi pi-search p-button-icon p-button-icon-left ng-star-inserted" aria-hidden="true"></span><!----><span class="p-button-label" aria-hidden="false">Button2</span><!----></button>