Single page app with Phoenix, what's in your Github Actions CI yml file?

My tests are failing on Github Actions (CI) whenever the test is using chromedriver with Wallaby. I feel like I’m forgetting something. Here’s my workflow yml file. Does anything look off? What’s in yours?

on: push

jobs:
  test:
    runs-on: ubuntu-latest

    services:
      db:
        image: postgres:11
        ports: ['5432:5432']
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
      - uses: actions/checkout@v1.0.0
      - uses: actions/setup-elixir@v1.1.0
        with:
          otp-version: 22.x
          elixir-version: 1.9.x
      - uses: actions/setup-node@v1
        with:
          node-version: 8.16.x
      - name: Install ChromeDriver
        run: |
          CHROME_VERSION=$(google-chrome --version | cut -f 3 -d ' ' | cut -d '.' -f 1) \
            && CHROMEDRIVER_RELEASE=$(curl --location --fail --retry 3 http://chromedriver.storage.googleapis.com/LATEST_RELEASE_${CHROME_VERSION}) \
            && curl --silent --show-error --location --fail --retry 3 --output /tmp/chromedriver_linux64.zip "http://chromedriver.storage.googleapis.com/$CHROMEDRIVER_RELEASE/chromedriver_linux64.zip" \
            && cd /tmp \
            && unzip chromedriver_linux64.zip \
            && rm -rf chromedriver_linux64.zip \
            && sudo mv chromedriver /usr/local/bin/chromedriver \
            && sudo chmod +x /usr/local/bin/chromedriver \
            && chromedriver --version
      - run: |
          mix local.rebar --force
          mix local.hex --force
          mix deps.get
          npm install --prefix assets/
      - name: Run tests
        run: |
          mix compile --warnings-as-errors
          mix test --trace test/my_app_web/integration/
        env:
          MIX_ENV: test
          HEADLESS: true

Here is the error message I get:

MyAppWeb.Integration.HomePageTest
  * test integration has home pageScreenshot taken, find it at file:////home/runner/work/mya_app/my_app/screenshots/1576543233980661611.png

  * test integration has home page (19377.8ms)

  1) test integration has home page (MyAppWeb.Integration.HomePageTest)
     test/my_app_web/integration/home_page_test.exs:6
     ** (Wallaby.QueryError) Expected to find 1, visible element that matched the css '#my-app' but 0, visible elements were found.
     
     code: tr_find(session, "#my-app", "My App Loaded")
     stacktrace:
##[error]       (wallaby) lib/wallaby/browser.ex:691: Wallaby.Browser.find/2
##[error]       test/my_app_web/integration/home_page_test.exs:12: (test)

The #my-app is added in a Vue template which makes me think the Vue app isn’t loading. I am also console logging and not seeing any of it being logged out. So, what am I forgetting with this setup?

Thank you so much

1 Like

aren’t you missing a step for compiling your assets?
ie add npm run deploy --prefix ./assets after npm install

npm install --prefix ./assets
npm run deploy --prefix ./assets

2 Likes

Thank you!
:heart: :green_heart: :blue_heart: :yellow_heart: :purple_heart:

1 Like