Testcafe: How is a Selector created to select a timestamp outside of HTML tag? <strong>Timestamp:</strong> 12/13/2023 10:55 A.M. EST

Question

I am new to TestCafe.

Below is example HTML code and when I create selector with id it is only returning "Current Timestamp:" and I need the timestamp for current time.

Page object file:

import { Selector } from 'testcafe';

class page {
lastUpdateTimeStamp = Selector('#timestamp_label');

export default new page();

<div _ngcontent-ww-123="" class="div-group">
      <strong _ngcontent-ww-123="" id="timestamp_label">Current Timestamp:</strong>
                  12/13/2023 10:55 A.M. EST
    </div>

tried to use selector below:

lastUpdateTimeStamp = Selector('#timestamp_label');


Returned value of only text "Current Timestamp:" 

Expecting Current Timestamp: 12/13/2023 10:55 A.M. EST

Answer 1

The issue occurs because of how you create your Selector.

lastUpdateTimeStamp = Selector('#timestamp_label');

In your example, you are selecting only the ‘strong’ html element. However, in order to select ‘Current Timestamp: 12/13/2023 10:55 A.M. EST’, you need to select the element that is a parent to both texts. In the example, it is class="div-group" div. So, the following selector should resolve the issue:

lastUpdateTimeStamp = Selector('.div-group');