Can't find appium ID because all the IDs are showing up as squares

Question

Appium is showing all the IDs I'm putting into my code as simple squares. Like, real s.

Tried to start recording myself selecting elements so I could check if the IDs are being actually found or if Appium is just with some issue, but even the code on the recorder displays an  on the xPath.

Output from the recorder:

let el3 = await driver.elementByXPath("(//XCUIElementTypeOther[@name=\"\"])[2]");
await el3.click();

Fiddle for the output appium displays when I tried to record myself selecting an element:

https://jsfiddle.net/3pLfhdmn/

Running on iOS, Xcode Version 11.3.1 (11C504). My application is built on react-native.

Here's how I'm trying to slip the IDs into the code:

<Button
  onPress={() => this.setState({ routeName: GLOBALS.NAVIGATOR.GUIAS_PENDENTES })}
  style={{ marginBottom: 4 }}
  badge
  name="teste"
  testID="teste"
  accessibilityIdentifier="teste"
  vertical
>
  {renderIf(
    this.state.qtdePendencias > 0,
    <Badge style={{ position: "absolute", marginLeft: 16, marginTop: 5 }}>
      <Text>{this.state.qtdePendencias}</Text>
    </Badge>
  )}
  <MaterialCommunityIcons
    name="alert-outline"
    style={{
      fontSize: 30,
      color: this.state.routeName == GLOBALS.NAVIGATOR.GUIAS_PENDENTES
        ? "#308EE7"
        : "#707070"
    }}
  />
</Button>;

Answer 1

Solved my own problem.

When you don't add any IDs (testID='testID') to your code, Appium displays the ID as .

I wasn't seeing any IDs because my Xcode was with some cache. Cleaned it, rebooted my Mac and it's now working as it should be.