Testcafe, how to click a button on a modal popup?

Question

I'm struggling to define a selector in TestCafe that clicks that button on the left called "start a car damage claim". This button appears on a modal popup .

My code looks like

class PortalDashboard {

constructor(){
    //Selectors Portal
    this.welcome_user_message = Selector('#welcomeBack') 
    this.topbar = Selector('#stateNavbar')
    this.footer = Selector('.row footerSectionOne')   
    this.policy_summary = Selector('#policySummaryList') 
    this.logout_button = Selector('.logoutBtn')
    this.my_claims = Selector('a[href="./claims"]')  
    this.view_motor_policy_details_link = (Selector('#policySummaryDetails_M0014157733').find('#claimLink_0'))
    
    //Start a claim - Modal popup
    this.motor_claim_modal = Selector ('#carAccidentDialog')
    this.property_claim_modal = Selector('.claimDialog')
    this.call_us_button = Selector('#callUsDesktop')
    this.start_claim_button = Selector('#defaultFocus')
    this.modal_popup=Selector('panel-body center')
}
async clickStartClaim(claimtype){
    await t
    .expect(this.modal_popup.exists).ok('Element not found', { timeout: config.general.shortTimeout })
    .expect(this.call_us_button.exists).ok('Element not found', { timeout: config.general.shortTimeout })
    .expect(this.start_claim_button.innerText).contains(claimtype)
    .click(this.start_claim_button)
    .setPageLoadTimeout(config.general.shortTimeout )

}

TestCafe fails at the moment to find the selectors modal_popup on the popup.

Which selector can I use so Testcafe can find the popup and then click the button?

Error displayed:

   1) AssertionError: Element not found: expected false to be truthy

 async clickStartClaim(claimtype){
         88 |        await t
       > 89 |        .expect(this.modal_popup.exists).ok('Element not found', { timeout: config.general.shortTimeout })

Answer 1

I think your problem is not with the button itself but with the modal. Note that the error is in the assertion:

.expect(this.modal_popup.exists).ok

Your modal_popup variable is Selector('panel-body center') but you have not declared if is class (.) or id (#).

So your variable into constructor should be:

this.modal_popup = Selector('.panel-body center')
                             ^
                            This

If you don't use . or # , TestCafe will look for the value as tag ( div , button ...) and panel-body is not a tag, is a class name.